HTML表格可选行Javascript包

是否有一个Javascript包，通过单击表行并使用Shift和Ctrl键使其可选择/高亮显示

我正在寻找与iTunes或其他音乐播放器相同的功能，可以通过单击行来突出显示一首歌曲，或通过按住shift键或control键并单击来突出显示多首歌曲。

您可以使用jQuery UI

可以按住Ctrl键选择多个iTen，也可以单击一个项目并拖动

.

无需插件即可完成！ 此示例通过按住Ctrl、cmd（适用于MacOS用户）或Shift键盘键并单击来突出显示一行或多行

我建议不要使用简单的插件。您将看到，要实现您需要实现的功能，这并不是很多代码

现场演示：

---

HTML:

假设我有下表（您将与行交互）

jQuery:

这是所有你需要的代码，请阅读评论

$(function() {

    /* Get all rows from your 'table' but not the first one 
     * that includes headers. */
    var rows = $('tr').not(':first');

    /* Create 'click' event handler for rows */
    rows.on('click', function(e) {

        /* Get current row */
        var row = $(this);

        /* Check if 'Ctrl', 'cmd' or 'Shift' keyboard key was pressed
         * 'Ctrl' => is represented by 'e.ctrlKey' or 'e.metaKey'
         * 'Shift' => is represented by 'e.shiftKey' */
        if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
            /* If pressed highlight the other row that was clicked */
            row.addClass('highlight');
        } else {
            /* Otherwise just highlight one row and clean others */
            rows.removeClass('highlight');
            row.addClass('highlight');
        }

    });

    /* This 'event' is used just to avoid that the table text 
     * gets selected (just for styling). 
     * For example, when pressing 'Shift' keyboard key and clicking 
     * (without this 'event') the text of the 'table' will be selected.
     * You can remove it if you want, I just tested this in 
     * Chrome v30.0.1599.69 */
    $(document).bind('selectstart dragstart', function(e) { 
        e.preventDefault(); return false; 
    });

});

最后，如果你坚持创建一个插件，你可以看看这个网站，定制你需要的代码

---

其他功能取决于您，我刚刚回答了您在问题中需要的内容：-）希望这有帮助。

当我用

ctrl键选择所有行时

。。。现在有一种机制可以在所选行中取消选择该行@oscarJarajust在

if（（e.ctrlKey | | | e.metaKey）| | e.shiftKey）

块中进行少量编辑。使用toggleClass代替addClass，如下面的

if（（e.ctrlKey | | | e.metaKey）| | e.shiftKey）{

row.addClass（'highlight'）；

}

好吧，正如我所说的，我刚刚回答了请求，但是可以肯定地添加更多的功能@MateeGojrahow以使其具有多选项？

tr { cursor: default; }
.highlight { background: yellow; }

$(function() {

    /* Get all rows from your 'table' but not the first one 
     * that includes headers. */
    var rows = $('tr').not(':first');

    /* Create 'click' event handler for rows */
    rows.on('click', function(e) {

        /* Get current row */
        var row = $(this);

        /* Check if 'Ctrl', 'cmd' or 'Shift' keyboard key was pressed
         * 'Ctrl' => is represented by 'e.ctrlKey' or 'e.metaKey'
         * 'Shift' => is represented by 'e.shiftKey' */
        if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
            /* If pressed highlight the other row that was clicked */
            row.addClass('highlight');
        } else {
            /* Otherwise just highlight one row and clean others */
            rows.removeClass('highlight');
            row.addClass('highlight');
        }

    });

    /* This 'event' is used just to avoid that the table text 
     * gets selected (just for styling). 
     * For example, when pressing 'Shift' keyboard key and clicking 
     * (without this 'event') the text of the 'table' will be selected.
     * You can remove it if you want, I just tested this in 
     * Chrome v30.0.1599.69 */
    $(document).bind('selectstart dragstart', function(e) { 
        e.preventDefault(); return false; 
    });

});