jquery每隔一个表行高亮一次

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

它看起来像纯 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

Answer 2

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

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

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

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