Question

大家好我刚开始使用jquery，我想知道如何解决这个问题：

我尝试通过单击复选框突出显示表格中的每一行，一切都很好，只是每隔一行都会突出显示。

    $('tr').on('click',':checkbox', function () {
            if($(this).is(':checked')) {
                $(this).closest('tr').addClass('highlighted');   
            } else {
              $(this).closest('tr').removeClass('highlighted');    
            }

我发现附加的css链接导致这个问题。不幸的是，我无法忽视它。我也试过toggleClass但没有成功。

如何使用上面提到的css文件突出显示表中的每个选中的行？

Answer 1

您可以发布css样式表中可能影响页面行呈现的所有规则吗？

如果您有一些代码为每一行提供even / odd类，那么使highlighted规则应用优先级高于even / odd规则的一种方法是指定它两次，例如：

//replace
tr.highlighted { background-color: purple }

//with
tr.even.highlighted, tr.odd.highlighted { background-color: purple }

Answer 2

看起来像pure-api，有一个更高的优先级规则.pure-table-striped tr:nth-child(2n-1) td{}，它设置了背景颜色，因此你的规则被该规则覆盖。解决方案是微调你的规则，如

.highlighted, .pure-table-striped tr.highlighted td {
    background-color: rgba(0, 255, 0, 0.7);
}

演示：Fiddle

jquery突出显示每隔一个表行

2 个答案: