使用control和shift键选择多行

Question

Demo

<table id="tableStudent" border="1">
  <thead>
    <tr><th>ID</th><th>Name</th>                            <th>Class</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John</td><td>4th</td></tr>
   <tr><td>2</td><td>Jack</td><td>5th</td></tr>
   <tr><td>3</td><td>Michel</td><td>6th</td></tr>
   <tr><td>4</td><td>Mike</td><td>7th</td></tr>
       <tr><td>5</td><td>Yke</td><td>8th</td></tr>
       <tr><td>6</td><td>4ke</td><td>9th</td></tr>
       <tr><td>7</td><td>7ke</td><td>10th</td></tr>
  </tbody>
</table>

$('tr').on('click',function(e)
{
   var objTR=$(this); 

});

我必须使用控制键选择多行。 然后将Student ID存储在数组中。 我该如何使用jquery Click事件。

Answer 1

如果您只想在按下控制键时单元格亮起，则此代码可以解决问题：

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<studentIds.length;i++)
            {
                if (studentIds[i] === +(this.cells[0].innerHTML))
                {//remove id from array
                    delete studentIds[i];
                    break;
                }
            }
        }
    },
    upCb = function(e)
    {
        target.off('click',clickCb);
        root.on('keydown',downCb);
        root.off('keyup',upCb);
    },
    downCb = function(e)
    {
        if (e.which === 17 || e.which === 16)
        {//17 is ctrl, 16 is shift
            root.off('keydown',downCb);
            root.on('keyup',upCb);
            target.on('click',clickCb);
        }
    };
    return downCb;
}()));

Fiddle demo

这段代码的作用基本上是监听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 fiddle with shift-select support

以及与之相关的代码：

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<tbl.rows.length;i++)
                {//start at 1, because head is ignored
                    if (tbl.rows[i] === target)
                    {//select from bottom to top
                        break;
                    }
                    if (tbl.rows[i] === prev)
                    {//top to bottom
                        prev = target;//prev is bottom row to select
                        break;
                    }
                }
                for(i;i<tbl.rows.length;i++)
                {
                    if (!expr.test(tbl.rows[i].className))
                    {//if cel is not selected yet, select it
                        tbl.rows[i].className += 'ui-selected';
                    }
                    if (tbl.rows[i] === prev)
                    {//we've reached the previous cell, we're done
                        break;
                    }
                }
            },
            upCb = function(e)
            {
                prev = undefined;//clear prev reference, if set
                window.addEventListener('keydown',downCb,false);//restore keydown listener
                tbl.removeEventListener('click',clickCb, false);//remove click
                window.removeEventListener('keyup',upCb,false);//and keyup listeners
            },
            downCb = function(e)
            {//this is the actual event handler
                e= e || window.event;
                key = e.which || e.keyCode;//which key was pressed
                if (key === 16 || key === 17)
                {//ctrl or shift:
                    window.removeEventListener('keydown',downCb,false);//ignore other keydown events
                    tbl.addEventListener('click',clickCb,false);//listen for clicks
                    window.addEventListener('keyup', upCb, false);//register when key is released
                }
            };
        return downCb;//return handled
    }()), false);
    window.removeEventListener('load',load,false);
}, false);

此代码已准备好接近复制粘贴，所以请至少给它一个机会。检查小提琴，它对我来说很好。它也通过相当严格的设置传递JSlint（/*jslint browser: true, white: true */），所以可以肯定地说这段代码并不那么糟糕。是的，它可能看起来有点复杂。但是，有关how event delegation works的快速阅读很快就会发布一个事件is easier than you think 此代码还大量使用闭包，这是一个强大的概念，实质上isn't really that hard to understand either，此链接的答案使用图像that came from this article: JavaScript closures explained。这是一个相当容易阅读，但它做得很好。读完之后，你会看到闭包是必不可少的，简单的，强大的和被低估的结构，承诺

Answer 2

首先，定义一些表示您已选择表格行的类：

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 <tr> element.
        // you can reverse the IF condition to get this one up above, and the unselecting case down.
        $(this).addClass('selected');
    }
});

通过这种方式，您可以选择一行。如果您有一个包含复选框或类似内容的列，您可能希望在我上面提供的事件监听器中执行该逻辑。

Answer 3

这可能会有助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'))