javascript - CSS 交替行 - 隐藏了一些行

Question

我正在尝试设置表格样式，使每一行的颜色都不同(奇数/偶数)。我有以下 CSS:

#woo tr:nth-child(even) td {
    background-color: #f0f9ff;
}

#woo tr:nth-child(odd) td {
    background-color: white;
}

但是，我的一些行可以隐藏，我仍然希望这些行交替显示。我怎样才能调整上面的内容，使其呈现交替行的外观，即使彼此相邻的行不一定是奇数和偶数？

Answer 1

如果您使用的是 jQuery，您可以使用它的函数之一，例如 .filter() , 只选择可见的元素。但这里的关键是 CSS 选择器 :visible。

例如(参见 jsfiddle ):

jQuery('tr:visible:odd').css({'background-color': 'red'});
jQuery('tr:visible:even').css({'background-color': 'yellow'});