使用control和shift键选择多行
演示
ID Name Class 1 John 4th 2 Jack 5th 3 Michel 6th 4 Mike 7th 5 Yke 8th 6 4ke 9th 7 7ke 10th
$('tr').on('click',function(e) { var objTR=$(this); });我必须使用控制键选择多行。 然后将Student ID存储在数组中。 我该如何使用jquery Click事件。
如果您只想在按下控制键时单元格亮起，则此代码可以解决问题：
var studendIds = []; $(window).on('keydown',(function() { var target = $('tr'), root = $(window), clickCb = function(e) { if (!$(this).hasClass('ui-selected')) { $(this).addClass('ui-selected'); //add id to array studentIds.push(+(this.cells[0].innerHTML)) } else { $(this).removeClass('ui-selected'); for(var i=0;i
小提琴演示 。
从本质上讲，这段代码的作用是监听keydown事件。 如果该键是ctrl键（代码17），则附加单击侦听器，如果单击特定行，则将设置/取消设置ui-selected类。 处理程序还会分离keydown侦听器本身并附加一个keyup侦听器，一旦释放ctrl键，它就会将事件侦听器设置回其原始状态。 与此同时，附加了另一个听众，它接收了keyup事件。 如果释放了键（ctrl），则会删除单击侦听器，并还原keydown事件侦听器。
正如我在评论中所说，尽管上面的代码确实记录了选择了哪些ID，但我个人并不这样做。
每当你需要那些id（可能是表单提交，或执行ajax请求）时，看到你标记了一个类的行，我就这样做：
function assumingAjaxFunction() { var data = {some: 'boring', stuff: 'you might send', ids: []}; $('.ui-selected > td:first').each(function() { data.ids.push($(this).text()); }); console.log(data.ids);//array of ids }
VanillaJS提供换挡选择支持
和它一起使用的代码：
window.addEventListener('load',function load() { 'use strict'; var tbl = document.getElementById('tableStudent'); window.addEventListener('keydown',(function() { var expr = /\bui\-selected\b/i, key, prev, clickCb = function(e) { e = e || window.event; var i, target = (function(elem) {//get the row element, in case user clicked on cell if (elem.tagName.toLowerCase() === 'th') {//head shouldn't be clickable return elem; } while(elem !== tbl) {//if elem is tbl, we can't determine which row was clicked anyway if (elem.tagName.toLowerCase() === 'tr') {//row found, break break; } elem = elem.parentNode;//if td clicked, goto parent (ie tr) } return elem; }(e.target || e.srcElement)); if (target.tagName.toLowerCase() !== 'tr') {//either head, table or something else was clicked return e;//stop handler } if (expr.test(target.className)) {//if row WAS selected, unselect it target.className = target.className.replace(expr, ''); } else {//target was not selected target.className += ' ui-selected';//set class } if (key === 17) {//ctrl-key was pressed, so end handler here return e; } //key === 16 here, handle shift event if (prev === undefined) {//first click, set previous and return prev = target; return e; } for(i=1;i
这段代码接近复制粘贴准备好了，所以请至少给它一个机会。 检查小提琴，它对我来说很好。 它也通过相当严格的设置传递JSlint（ /*jslint browser: true, white: true */ ），所以可以肯定地说这段代码并不坏。 是的，它可能看起来有点复杂。 但是，关于事件委派如何工作的快速阅读很快就会发现委托事件比你想象的要容易
这段代码也大量使用了闭包，这个强大的概念本质上并不是很难理解 ，这个链接的答案使用了本文中的图像：解释了JavaScript闭包 。 这是一个相当容易阅读，但它做得很好。 在您阅读完本文之后，您会看到闭包是必不可少的，简单的，强大的和被低估的结构，承诺
首先，定义一些表示您已选择表行的类：
tr.selected, tr.selected td { background: #ffc; /* light-red variant */ }
然后编写这个jQuery事件处理程序：
$('table#tableStudent').on('click', 'tr', function() { if($(this).hasClass('selected')) { // this accours during the second click - unselecting the row $(this).removeClass('selected'); } else { // here you are selecting a row, adding a new class "selected" into element. // you can reverse the IF condition to get this one up above, and the unselecting case down. $(this).addClass('selected'); } });
通过这种方式，您可以选择一行的到期日。 如果您有一个包含复选框或类似内容的列，您可能希望在我上面提供的事件监听器中执行该逻辑。
这可能有助于DEMO ：
function bindMultipleSelect(element){ var self = this; var isCtrlDown = false; element.on('click', 'tr', function(){ var tr = $(this); if(!isCtrlDown) return; tr.toggleClass('ui-selected') }) $(document).on('keydown', function(e){ isCtrlDown = (e.which === 17) }); $(document).on('keyup', function(e){ isCtrlDown = !(e.which === 17) }); self.getSelectedRows = function(){ var arr = []; element.find('.ui-selected').each(function(){ arr.push($(this).find('td').eq(0).text()) }) return arr; } return self; } window.myElement = bindMultipleSelect($('#tableStudent'))