1

我有一张带有斑马条纹的桌子:

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

我想显示/隐藏它的行,保持表格条纹(从更改的行重新着色到最后一行)。我看到了两种方法:

  1. 创建一个不可见的表并<TR>使用 jQuery 将 s移入after()/移出它。我已经测试了分离并且它可以工作(表在分离时被重新着色),但是插入分离的(无处)行没有,所以我猜将行移动到另一个表应该会有所帮助。
  2. 在我们切换后立即调用 jQuerytoggle()并创建/删除不可见的。<TR>

哪一个更好?也许,还有更好的方法?

问候,

4

1 回答 1

7

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;}
于 2012-07-05T19:54:42.823 回答