Css着色表问题

Question

我一直在努力制作一张彩色的桌子，其中的行数与奇数行的颜色不同。 我唯一的问题是，即使有隐藏的行，我也必须能够做到这一点，因为如果你隐藏第2行，那么你会看到第1行和第3行颜色相同。

这就是我所拥有的：

tr:not([display="none"]):nth-child(even){
    background: #EFEFFF;
}
tr:not([display="none"]):nth-child(odd){
    background: #E0E0FF;
}

此代码对我不起作用，因为浏览器不会根据给定的顺序过滤：not和：nth-​​child。 有什么建议吗？

Answer 1

您可以在可见行中添加一个类，以便将其编写为：

tr.visible:nth-child(even) {
    background: #EFEFFF;
}
tr.visible:nth-child(odd){
    background: #E0E0FF;
}

然后在使行可见/不可见时使用jquery添加/删除类？

Answer 2

在尝试解决类似问题时结束了这里。使用以下JS基于过滤后添加的类更新CSS。

$('tr.visible').filter(':odd').css('background-color', '#EFEFFF');
$('tr.visible').filter(':even').css('background-color', '#E0E0FF');

请注意由于零索引数组导致的翻转颜色。