CSS Alternate Rows - 隐藏了一些行 [英] CSS Alternate Rows - some rows hidden

问题描述

我正在尝试设置一个表格，以便每一行都是不同的颜色（奇数/偶数）。我有以下CSS：

I'm trying to style a table so that each row is a different colour (odd/even). I have the following CSS:

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

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

然而，我的一些行可以隐藏，我仍然喜欢要交替的行。我如何调整上面所以它给出了备用行的外观，即使彼此相邻的行不一定是奇数和偶数？

However, some of my rows can be hidden and I'd still like the rows to alternate. How can I adjust the above so it gives the appearance of alternate rows, even if the rows that are next to each others aren't necessarily odd and even?

推荐答案

如果您使用的是jQuery，则可以使用其中一个功能，例如 。 filter（） ，仅选择可见的元素。但这里的关键是CSS选择器：可见。

If you are using jQuery, you can employ one of its functions, for example .filter(), to choose only the elements that are visible. But the key here is a CSS selector :visible.

例如（参见jsfiddle ）：

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

这篇关于CSS Alternate Rows - 隐藏了一些行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！