Question

jQuery v1.11

给定一个包含6列的HTML表格，我希望表格中第2,3,5和6列的单元格能够响应click个事件。因此，如果用户单击第一列或第四列中的单元格，则不应调用click事件处理程序。

这可以防止在用户单击第一列时调用事件处理程序：

 $('#my-table').on('click', 'tbody td:not(:first-child)', function (e) {
    alert("I've been clicked on!");
 });

当用户点击第4列时，他会阻止调用事件处理程序：

 $('#my-table').on('click', 'tbody td:not(:nth-child(4))', function (e) {
     alert("I've been clicked on!");
 });

我的问题是，如何修改上述内容，以便在第一列或第四列中发生点击时不会调用事件处理程序。

JSFiddle

编辑： @micnil回答了我的具体问题，我会发现他建议使用的模式很有用。但是，@ Oleg花时间指出了一种更好的方法。他没有将事件处理程序绑定到每个单元格，而是建议我将事件处理程序绑定到表中。在我的情况下，这被证明是更好的。

使用performance.now()，discussed here，我得到以下结果，为Chrome中包含1,000行的jQuery DataTable设置绑定：

 Binding the click event to cells took 0.14627581768183972 milliseconds.

 Binding the click event to the table took 0.04619236347855349 milliseconds.

Answer 1

您可以在选择器中放置一个昏迷：

 $('#my-table').on('click', 'tbody td:not(:nth-child(4), :first-child)', function (e) {
     alert("I've been clicked on!");
 });

Answer 2

我认为在你的情况下最好的选择是使用JQuery函数 index() ，它将为你提供点击td的索引，你可以做你想要的条件根据返回的索引，请查看 Your updated fiddle 。

JS：

 $('#my-table').on('click', 'tbody td', function () {

     if($(this).index() < 4){ //click in td  between 1 and 4
         alert('td between 1 and 4 clicked');
     }else{ //click in another td
         alert('td between 5 and 6 clicked');   
     }

 });

希望有所帮助。

Answer 3

理解这一点非常重要，像$('#my-table').on('click', 'tbody td:not(:first-child)', function (e) {...});这样的代码创建了第一个jQuery包装器，其中所有<td>元素对应'tbody td:not(:first-child)'选择器，然后绑定事件处理程序分别对jQuery对象中的每个 DOM元素。

我建议你选择另一种方式。您可以在整个click上对<table>进行一次绑定。事件冒泡会将单元格上的点击转发给父级<tr>，然后再转移到<table>。 e.target获取所点击的<td>。

非常重要

所以代码可能如下：

var columnIndexesIgnore = [0, 3];
$('#my-table').on('click', function (e) {
    var $td = $(e.target).closest("td"); // e.target can be <span> instead of <td>
    if ($td.length > 0 && $.inArray($td[0].cellIndex, columnIndexesIgnore) < 0) {
        // cellIndex is 0-based index. We display in alert 1-based column index
        alert("I've been clicked on column " + ($td[0].cellIndex + 1) + "!");
    }
});

我使用了<td>的DOM的cellIndex属性。它是<td>元素的列的从0开始的索引。因此，如果$td[0].cellIndex为0或3，则需要忽略点击次数。

修改后查看您的演示：http://jsfiddle.net/OlegKi/spckrjvf/5/

Answer 4

您可以通过执行此操作来检查所需的条件。

$('td').click(function () {
    var col = $(this).parent().children().index($(this));
    var row = $(this).parent().parent().children().index($(this).parent());
    if (col == 3 || col == 0) {
        alert("I have clicked on column " + col);
    } else {
        alert("I have clicked on another column");
    }
});

使用jQuery，如何让click事件处理程序响应所选的表列？

4 个答案: