在表中隐藏/显示的TR保持斑马条纹(Hide/show TRs in a table keeping

我有一个表，这是斑马条纹：

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

我想显示/隐藏其行，保持表条纹（从更改的行重新着色的最后一个）。 我看到2种方法可以做到这一点：

1. 创建一个不可见表和移动<TR> s的jQuery的after()从中/。 我测试过分离和它的工作原理（表被重新着色的分离），但将分离的（无门）行不，那么移动行到另一个表应该帮助，我猜。
2. 调用jQuery的toggle()与创建/删除无形沿<TR>所述一个之后，我们进行切换。

哪一个更好？ 也许，甚至有一个更好的办法？

问候，

Answer 1:

CSS的:nth-child选择器基于其索引它的兄弟姐妹中有一个元素。 它并不需要的元件的可见性（或其它选择）考虑在内。

而不是添加/使用jQuery删除行的，只是添加/删除类名称： 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;}

文章来源: Hide/show TRs in a table keeping zebra striping