0

有一个包含一些图像和一些选择框的表格。我想在用户单击该行时突出显示该行（意味着任何 td），除了选择框和图像

现在我正在使用这个，

$("selector").live("click",function() {
    $(this)
        .parents("tr:first")
        .toggleClass("diffColor")
    ;
});

但是，如果我单击选择框或图像，它将应用该类。但是当我单击选择框或任何其他图像时，我不需要。

看这里

提前致谢...

4

6 回答 6

3

尝试这个：

$(".selector").on("click", function (e) {
    if (e.target === this) $(this).parent("tr:first").toggleClass("diffColor");
});

假设这.selector是所有的类名td

这里，this表示当前作用域中的元素，这里总是被td点击的。

并且e.target表示实际点击的元素，它可以是td或checkbox内的任何东西td。

因此，如果实际单击的元素不在td当前范围内，则e.target === this返回 false 并且没有任何反应（没有触发单击事件），反之亦然。

于 2013-04-16T12:18:49.087 回答
2

如果您不想toggleClass在单击td包含 an 的a 时这样做，<img>或者<select>您可以执行以下操作：

$('selector').live('click', function() {
    if (!$(this).has('select, img').length) {
      $(this).parents('tr:first').toggleClass('diffColor');
    }
});

这是你更新的小提琴

于 2013-04-16T12:20:38.577 回答
2

我有检查 TD 是否包含图像或选择框的解决方案。

$("#tableId td").on("click",function() {  
     var ths=$(this);    
     if((ths.has("select").length ? false : true)&&(ths.has("img").length ? false : true)){
         $(this).parent().toggleClass("diffColor");
     }
    });

JSFIDDLE

于 2013-04-16T12:46:43.780 回答
1

尝试这个....

$("td").live("click",function() {
$(this)
    .parents("tr:first")
    .toggleClass("diffColor")
;
});

演示

于 2013-04-16T12:16:37.827 回答
0

这对你好吗？只需将类“更改”添加到 td。

$("#tableId td.change").on("click",function() {
        $(this)
            .parents("tr:first")
            .toggleClass("diffColor")
        ;
    });


<table id="tableId" border="1">
     <thead>
        <th></th>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
     </thead>
     <tbody>
        <td><input type="checkbox"/></td>
        <td class="change">FirstTableColumn1</td>
        <td class="change">FirstTableColumn2</td>
        <td><select>
            <option>AAA</option>
            <option>BBB</option>
            <option>CCC</option>
            <option>DDD</option>
            </select></td>

     </tbody>
   </table>
于 2013-04-16T12:22:08.833 回答
0

发生这种情况是因为您的事件正在冒泡。

您可以为孩子的点击事件添加一个 event.stopPropagation 以防止这种情况发生。

因此对于任何输入和选择元素添加以下内容以防止传播。如果您已经有点击事件处理程序，请将 stopPropagation 添加到函数的开头。

$("#tableId").find("input, select")
             .click(function(e){e.stopPropagation();});
于 2013-04-16T12:37:34.793 回答