在表格中隐藏/显示TR，保持斑马条纹 [英] Hide/show TRs in a table keeping zebra striping

问题描述

我有一张斑马条纹的桌子：

I have a table which is zebra-striped:

tr:nth-child(even)
{
    background-color: red;
}
tr:nth-child(odd)
{
    background-color: blue;
}

我想显示/隐藏其行，保持表条纹（从更改的行到最后一行）。我有两种方法可以做到这一点：

I want to show/hide its rows, keeping the table striped (recolored from a changed row to the last one). I see 2 ways to do this:

1. 创建一个不可见的表并移动< TR> s与jQuery 之后（）来往/来自它。我已经测试了分离并且它可以正常工作（表格在分离时会重新着色），但是插入分离的（无处）行不会，所以将行移动到另一个表应该有帮助，我想。


2. 调用jQuery toggle（）以及在我们之后创建/删除不可见的< TR> 正在切换。

1. Create an invisible table and move <TR>s with jQuery after() to/from it. I've tested detaching and it works (the table is being recolored on detaching), but inserting the detached (to nowhere) rows doesn't, so moving rows to another table should help, I guess.
2. Call jQuery toggle() along with creating/removing invisible <TR> right after the one we are toggling.

哪一个更好？也许，还有更好的方法吗？

Which one is better? Maybe, there is even a better way?

问候，

推荐答案

CSS的：nth-​​child 选择器根据其兄弟姐妹中的索引选择一个元素。它不会考虑元素的可见性（或其他选择器）。

CSS's :nth-child selector selects an element based on its index among its siblings. It does not take the visibility (or other selectors) of an element into account.

不是使用jQuery添加/删除行，而只需添加/删除类名： http://jsfiddle.net/rTER4/

Instead of adding/removing rows using jQuery, just add/remove class names: http://jsfiddle.net/rTER4/

var $allRows = $('tr:visible');
var $oddRows = $allRows.filter(':odd');
var $evenRows = $allRows.filter(':even');

// Remove old classes, then add new ones.
$oddRows.removeClass('even').addClass('odd');
$evenRows.removeClass('odd').addClass('even');

/* CSS */
tr.even { background-color: red; }
tr.odd  { background-color: blue;}

这篇关于在表格中隐藏/显示TR，保持斑马条纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！