使用control和shift键选择多行

Question

演示

<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); 
});

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

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演示

从本质上讲，这段代码所做的就是监听一个keydown事件。如果该键是ctrl键（代码17），则会附加一个单击侦听器，如果单击某一特定行，该侦听器将设置/取消设置ui-selected类。该处理程序还分离keydown侦听器本身，并附加一个keyup侦听器，该侦听器在释放ctrl键后将事件侦听器设置回其原始状态。同时，附加了另一个侦听器，该侦听器接收keyup事件。如果释放了键（ctrl），则会删除click侦听器，并恢复keydown事件侦听器。

正如我在评论中所说，尽管上面的代码确实会跟踪选择了哪些id，但我个人不会这样做
每当你需要这些id时（可能是在表单提交时，或者执行ajax请求时），因为你已经将这些行标记为usingn类，我只会这样做：

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-selectedb/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);

这段代码即将复制粘贴，所以请至少给它一个机会。检查一下fiddle，它对我来说很好。它也以相当严格的设置（/*jslint browser: true, white: true */）传递JSlint，所以可以肯定地说，这段代码并没有那么糟糕。是的，它看起来可能有点复杂。但是，快速阅读一下事件委派的工作原理，很快就会发现委派事件比您想象的要容易
这段代码还大量使用闭包，这是一个强大的概念，本质上也不难理解，这个链接的答案使用了来自本文的图像：JavaScript闭包解释。这是一本相当容易阅读的书，但它做得很好。读过这篇文章后，你会发现闭包是重要的、简单的、强大的和被低估的构造，承诺

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

这可能有助于演示：

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'))