选择第二个可见表格行

我有一个表格显示树形结构（超级和子类别）。当用户点击一个超类别时，子类的显示属性被设置。选择第二个可见表格行

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

<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>

当“超级2”元件上的用户点击，则“隐藏”类是从子元素除去。

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

/* 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脚本，重新计算偶数和奇数行，每当有任何改变？在此先感谢您的任何提示！

来源

2012-03-11 Oromis

这会被问到很多 - 典型的答案是，它不可能用纯CSS（直到CSS4也许），所以同时你需要在JS中完成所有这些。实际上，'：visible'选择器实际上是一个非标准的选择器，它出现在jQuery/Sizzle中，也可能是其他一些库。 – BoltClock 2012-03-11 17:02:22

[样式使用n-child保持表格的方面（交替行颜色）更新]（http://stackoverflow.com/questions/9216398/style-using-nth-child-to-keep-tables-aspect-交替排列颜色更新） – BoltClock 2012-03-11 17:11:01

这个jQuery片断将做的工作：

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

发挥它在jsFiddle

来源

2012-03-11 17:08:32

We're class'alternate'是从哪里来的？ – 2016-08-16 13:30:36

你说隐藏类是删除onclick。
保持简单，并添加一个IE类：“show”。

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

编辑：
我会责怪exaustion，但我认为这可能是正确的语法。

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

来源

2012-03-11 17:04:35 Bradmage

这与OP代码中的第三条规则类似的方式失败。查看我刚刚添加的可能的重复链接。 – BoltClock 2012-03-11 17:09:43

我还没有机会测试以上。但不同之处在于我的答案假设能够将类“show”添加到适当的TR中，这取决于“......隐藏”类被删除......“我确信应该使用” TR：没有（.hide）：第n个孩子”。绝对好奇，但今晚要多检查一下。 – Bradmage 2012-03-11 18:54:44

向上最新的和做的工作faster方法是：

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

然后，您可以在CSS中使用这些奇数行样式.odd {}

来源

2014-12-08 07:43:43 lapin

class'odd'从哪里来？ – 2016-08-16 13:30:15

@BernhardDöbler我刚刚更新了答案。问题是关于“选择”每隔一行的可见行，这是通过：'$（'tr：not（：hidden）'）。filter（'：odd'）'执行的。然后，我只需在这些行中添加一个“.odd”类，以便我可以在CSS中轻松地设置它们。选择的答案也一样，但性能不高。 – lapin 2016-08-18 01:21:09

选择第二个可见表格行

回答

相关问题