tablerow / data上的nth-child（even）

Question

我在使nth-child（even） css在我的表行上正常工作时有些挣扎。

我为您创建了一个小提琴，您也可以查看问题所在： http ： //jsfiddle.net/jn9q8/

我有这个过滤系统，可以在其中将发布者划分为某些国家。 如果单击顶部的“全部”，则所有发布者都将通过第2个表行后面的灰色背景在第n个子表（偶数）上正常工作。

如果您然后单击“ EST”，则会看到第n个孩子（偶数）不再像应该的那样工作。 例如，您连续看到2条灰色背景线，因为“​​ ALL”类别中的某些发布者不属于“ EST”，并且第n个子元素样式当然不知道这一点。

我的风格如下：

       table.pubTable tr:nth-child(even) td{
       background-color: #dcdcdc;
       width: 627px;
       height: 26px;
       padding-top: 12px;
       }

是否还有其他方法可以使它起作用，所以无论您单击背景色的哪个类别，每个发布商上的颜色都将始终均匀？

Answer 1

隐藏和元素不会将其删除，因此就CSS而言，该元素仍然存在，并且出于nth-child的目的仍应计数。

我的建议是克隆表以充当“模板”。 然后，在更改显示的行时，从此“模板”创建一个副本，并从中删除不应显示的行。 然后，您可以淡出显示的表格，然后淡入新表格。

Answer 2

问题的原因是由于您的CSS代码将样式添加到所有tr，所以即使您隐藏了一些tr，它也保留在dom中，并包含在奇数中。

您可以尝试首先将一种名为show的类添加到所有行的一种方法，然后您的CSS将是

table.pubTable tr.show:nth-child(even) td{
       background-color: #dcdcdc;
       width: 627px;
       height: 26px;
       padding-top: 12px;
       }

table.putTable tr.hide{
    display:none;
}

现在，一旦您应用了过滤器，因此不需要显示所有这些行，请删除类show并添加类hide现在您的样式仅过滤tr.show，因此它将仅在可见的tr.show上计数为偶数和奇数，您将得到你想要什么。