javascript CSS 交替行 - 隐藏了一些行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6220587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Alternate Rows - some rows hidden
提问by Andy
I'm trying to style a table so that each row is a different colour (odd/even). I have the following CSS:
我正在尝试为表格设置样式，以便每一行都是不同的颜色（奇数/偶数）。我有以下 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?
但是，我的某些行可以隐藏，我仍然希望这些行可以交替。我怎样才能调整上面的内容，使其呈现交替行的外观，即使彼此相邻的行不一定是奇数和偶数？
回答by Tadeck
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.
如果您使用 jQuery，则可以使用其功能之一，例如.filter()，仅选择可见的元素。但这里的关键是一个 CSS 选择器:visible。
For example (see jsfiddle):
例如（见jsfiddle）：
jQuery('tr:visible:odd').css({'background-color': 'red'});
jQuery('tr:visible:even').css({'background-color': 'yellow'});
回答by Jeff Seifert
I solved this issue using a background image for the table that consisted of the two alternate colors. This makes for not-quite-a-full-CSS solution as it involves creating an image, but it should scale very well for tables with thousands of entries.
我使用由两种替代颜色组成的表格的背景图像解决了这个问题。这使得不完全是完整的 CSS 解决方案成为可能，因为它涉及创建图像，但对于具有数千个条目的表，它应该可以很好地扩展。
The background-image in the base64 encoding below is a 1x50 image with the top 25 pixels as one color and the bottom 25 pixels as the alternate color.
下面 base64 编码中的背景图像是一个 1x50 图像，顶部 25 个像素作为一种颜色，底部 25 个像素作为替代颜色。
table {
border-collapse: collapse;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbATAssXhCIwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAYSURBVAjXY/j8/joTAwMDTfGXDzdpbQcATuQF2Ze0VigAAAAASUVORK5CYII=);
}
td {
padding: 2px 4px;
height: 21px;
}<table>
<tbody>
<tr style="display: table-row;">
<td>ANIMAL!!</td>
</tr>
<tr style="display: table-row;">
<td>Beaker</td>
</tr>
<tr style="display: none;">
<td>Bunsen Honeydew, Ph.D.</td>
</tr>
<tr style="display: table-row;">
<td>Camilla the Chicken</td>
</tr>
<tr style="display: table-row;">
<td>Dr. Julius Strangepork</td>
</tr>
<tr style="display: none;">
<td>Dr. Teeth</td>
</tr>
<tr style="display: none;">
<td>Floyd Pepper</td>
</tr>
<tr style="display: none;">
<td>Gonzo</td>
</tr>
<tr style="display: table-row;">
<td>Janice</td>
</tr>
<tr style="display: none;">
<td>Miss Piggy</td>
</tr>
<tr style="display: none;">
<td>Rizzo</td>
</tr>
<tr style="display: none;">
<td>Robin the Frog</td>
</tr>
<tr style="display: table-row;">
<td>Sam the Eagle</td>
</tr>
<tr style="display: table-row;">
<td>Statler</td>
</tr>
<tr style="display: none;">
<td>The Swedish Chef</td>
</tr>
<tr style="display: table-row;">
<td>Waldorf</td>
</tr>
<tr style="display: none;">
<td>Zoot</td>
</tr>
</tbody>
</table>回答by Daniel Rikowski
Since the "missing stripe phenomenon" only occurs if an oddnumber of rows is hidden, you might get away with adding a single invisible padding rowwherever an odd number of rows is hidden.
由于“缺失条纹现象”仅在奇数行被隐藏时才会发生，因此您可以在奇数行被隐藏的地方添加一个不可见的填充行。
Row 1
Row 2
Row 3 (hidden)
Padding (hidden)
Row 4
Row 5
If this actually is a good solution highly depends on your current code, e.g. how you create the table and how rows are hidden.
如果这实际上是一个好的解决方案，在很大程度上取决于您当前的代码，例如您如何创建表以及如何隐藏行。
But if your tables are huge and large chunks of consecutive rows are hidden, this would perform much better than a Javascript/jQuery solution.
但是，如果您的表很大并且隐藏了大块的连续行，这将比 Javascript/jQuery 解决方案执行得更好。
回答by lhan
I realize this is super late, but I ran into this same problem today and came up with a pure CSS solution using an nth-childformula. I don't know if it fits your exact scenario, but if every other row is hidden but you still need the visible rows to be alternating colors, this works great. The CSS selector looks like this:
我意识到这太晚了，但我今天遇到了同样的问题，并想出了一个使用nth-child公式的纯 CSS 解决方案。我不知道它是否适合您的确切情况，但如果其他每一行都被隐藏，但您仍然需要可见行是交替颜色，这很好用。CSS 选择器如下所示：
tr:nth-child(4n - 1) { background-color: grey; }
tr:nth-child(4n - 1) { background-color: grey; }
Here is a fiddleshowing it in action.
This makes every other visible rowgrey. For more information on how these formulas work, this is a great tutorial.
这使得每隔一个可见的行变灰。有关这些公式如何工作的更多信息，这是一个很棒的教程。
回答by oblig
This is a hard problem, I just spent a while playing with CSS2 and 3 selectors, and I'm not sure we're there yet. Something like this should be possible, but doesn't work:
这是一个棘手的问题，我只是花了一段时间玩 CSS2 和 3 选择器，我不确定我们还没有。这样的事情应该是可能的，但不起作用：
tr td {background-color:white;}
tr td:not([style="display:none"]):nth-of-type(even) {
background-color:#f0f9ff;
}
<tr><td>1</td></tr>
<tr><td style="display:none">2</td></tr>
<tr><td>3</td></tr>
Seems you're stuck with jQuery's :visibleextension (not native CSS), but if it's running slow, definitely paginate the rows as @Ionut says.
似乎您坚持使用 jQuery 的:visible扩展（不是本机 CSS），但如果它运行缓慢，请务必按照@Ionut 所说的那样对行进行分页。
