Question

我有一个显示树结构的表（超级和子类别）。当用户单击超类别时，将显示子项的显示属性。

现在我想在每个第二个表行添加交替的背景颜色 - 但当然只考虑当前可见的那些。以下是结构的简化示例：

<table>
    <tr data-level="0"><td>Super 1</td></tr>
    <tr class="hide" data-level="1"><td>Sub 1</td></tr>
    <tr data-level="0"><td>Super 2</td></tr>
    <tr class="hide" data-level="1"><td>Sub 2</td></tr>
    <tr class="hide" data-level="1"><td>Sub 3</td></tr>
    <tr class="hide" data-level="1"><td>Sub 4</td></tr>
</table>

当用户点击“Super 2”元素时，将从子元素中删除“hide”类。

我尝试了几种选择器，例如：

/* Ugly result (dosn't recognize that elements are hidden) */
tr:nth-child(2n)
{
    background-color: grey;
}

/* Doesn't work at all */
tr:visible:nth-child(2n)
{
    background-color: grey;
}

/* Not what I inteded to do */
tr:not(.hide):nth-child(2n)
{
    background-color: grey;
}

我希望我明白我想做什么。

这可能是CSS还是我应该编写一个JS脚本，只要有任何变化，就会重新计算偶数行和奇数行？提前感谢任何提示！

Answer 1

你说隐藏课程被取消了保持简单，并添加一个IE类：“show”。

.show tr:nth-child(odd)    { background-color:#eee; }
.show tr:nth-child(even)   { background-color:#fff; }

编辑：
我会责备他的精疲力竭，但我认为这可能是正确的语法。

tr.show:nth-child(odd)    { background-color:#eee; }
tr.show:nth-child(even)   { background-color:#fff; }

Answer 2

这个jQuery代码段将完成这项工作：

$('tr').removeClass('alternate')
$('tr:not(.hide):odd').addClass('alternate')

在jsFiddle

上播放

Answer 3

最新的faster方式是：

$('tr').removeClass();
$('tr:not(:hidden)').filter(':odd').addClass('odd');

然后你可以使用.odd {}

在CSS中设置那些奇数行的样式

选择每隔一秒可见的表行

3 个答案: