javascript - 使用 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); 

});

我必须使用控制键选择多行。然后将学生 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 .

本质上，这段代码的作用是监听按键按下事件。如果该键是 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);

此代码已接近准备好复制粘贴，所以请至少给它一个机会。检查 fiddle ，它对我来说很好用。它也通过相当严格的设置传递 JSlint (/*jslint browser: true, white: true */)，所以可以肯定地说这段代码还不错。是的，它可能看起来有些复杂。但快速阅读一下 how event delegation works很快就会证明委托(delegate)一个事件is easier than you think
此代码还大量使用了闭包，这是一个强大的概念，本质上是 isn't really that hard to understand either ，这个链接的答案使用图像 that came from this article: JavaScript closures explained .这是一本相当容易读的书，但它做得很好。阅读本文后，您将看到闭包是必不可少的、简单的、强大的和被低估的结构，保证