Question

我有一个Datatables表，里面有一些随机值。我想在客户端点击TR本身时创建一个弹出窗口，但不是在表的第一个和最后一个TD上。

<table class="table href="#popup">
    <tr id="tr1">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr2">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr3">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
    <tr id="tr4">
        <td><input type="checkbox"></td>
        <td>Test1</td>
        <td>Test1</td>
        <td><input type="checkbox"></td>
    </tr>
</table>

我的弹出式插件就像是，如果调用href链接并且弹出式div id等于该href值，它会自动弹出。

但是，如果有人点击第一个或最后一个TD，则不希望弹出窗口激活。实际上是否有可能以某种方式实现这一目标？

（不应该提到以下解决方案，因为它会使代码看起来像一个混乱：如果我选择所有TD字段而没有第一个和最后一个，并添加href属性所有选定的TD元素。）

欢迎任何其他建议！

Answer 1

请使用：

将:first-child和:last-child与not()

一起使用

$('table tbody tr td').not(":first-child").not(":last-child").click(function(
   //This will only be triggered on the td that are not the first or the last on a tr

))

Answer 2

单击时，事件将从子节点传播到父节点（learn more here）。

您可以在表格中的td:first-child和td:last-child元素中停用事件传播，以防止您到达tr事件处理程序。

我还建议您使用event delegation来保持更好的效果。

$('.table').on('click', 'tr', function() {
    alert('show popup'); 
});

$('.table').on('click', 'td:first-child, td:last-child', function(e) {
    e.stopPropagation();
});

FIDDLE ：http://jsfiddle.net/6QTrL/1/

Answer 3

这是完成这项工作的小提琴 - First and Last row now clickable

我有第一行和最后一行发出警报，但这只是为了让您了解如何定位它们。

$(function(){
    var tableRows = $('table').find('tr');

    $('table').on('click', 'tr', function(){

        if (this == tableRows[0])
            alert('first row');
        else if (this == tableRows[tableRows.length - 1])
            alert('last row');
        else
            alert('somewhere in the middle');
    });    
});

以下代码可能更符合您的要求。我在小提琴中制作了上面的代码，所以我也粘贴了它。

$(function(){
    var tableRows = $('table').find('tr');

    $('table').on('click', 'tr', function(){
        if (this != tableRows[0] && this == tableRows[tableRows.length - 1])
            alert('somewhere in the middle');
    });    
});

如何处理没有jQuery中第一个和最后一个TD的TR点击？

3 个答案: