在表格单元格选择上添加可选类答案

【问题标题】：Add Selectable Class on table cell selection在表格单元格选择上添加可选类
【发布时间】：2015-06-12 06:21:06
【问题描述】：

我有一张 html 表格。

<table id="tbl_1">
    <tr>
        <td>ABCD</td>
        <td>ABCD</td>
    </tr>
    <tr>
        <td>ABCD</td>
        <td>ABCD</td>
    </tr>
</table>

我可以添加selectable类

$(document).ready(function () {
     jQuery('#tbl_1').selectable({
         filter: "td"
     });
});

当我选择多个表格单元格时，我想将selectable 类添加到该表格中。我不知道我可以在哪个活动上做到这一点。任何帮助，将不胜感激。谢谢。

【问题讨论】：

你的意思是我们如何选择ctrl+click或shift+click
@GuruprasadRao 选择表格单元格，就像我们使用鼠标选择任何文本一样。

标签： jquery html jquery-ui jquery-ui-selectable

【解决方案1】：

$("#tbl_1").selectable({
    filter: "td",
    selecting: function (event, ui) {
        $(ui.selecting).addClass('classA');
    },
    unselecting: function (event, ui) {
        $(ui.unselecting).removeClass('classA');
    },
    selected: function (event, ui) {
        $(ui.selected).addClass('classB');
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('classB');
    }
});

以下是您可以根据自己的组合使用的功能

FIDDLE DEMO

【讨论】：

【解决方案2】：

您可以使用下面的代码向表中添加可选类。

$(document).ready(function () {      
     jQuery('#tbl_1').addClass('selectable');        
});
//it add class when page load

【讨论】：

我知道，但我想在表格单元格选择中添加类。