Javascript 交替表格行颜色显示：无设置

我有一个用javascript制作的动态表。根据不同的用户事件，某些行将被隐藏、重新排列等。更具体地说，我使用的是

display:none以执行此操作。问题是行始终保持其原始背景色（想象一下，如果所有行都可见，那么您可以看到交替的颜色）。如果整个表都可见，那就好了，但正如我提到的，有时某些行会隐藏或显示在不同的位置。这通常会导致相同颜色的两行或多行相互堆叠

有一个类似的帖子：


我尽可能多地尝试了这些解决方案。然而，我的问题依然存在。可能是由于以下原因：


我没有删除列，我只是设置
display:none

我不是在jquery环境中工作，所以我只使用本机javascript解决方案

我的代码是：

tr:nth-child(even) {
    background:gray;
}
tr:nth-child(odd) {
    background:lightgray;
}

我试过
tr:nth类型（奇数）
和许多类似的变体。在CSS或本机javascript中还有什么我可以尝试的吗

更多关于可视性/选择的信息：

CSS:

JS:

我使用的是d3.js，但我想我将省略d3标记，因为这似乎更像是css或js的问题。这是一个小片段，主要用于上下文，但本质上我们应该能够推断可见性是通过类赋值来切换的。如果你好奇的话，只要用户在我相邻的散点图上选择一个圆，就会出现这种情况。
这不是CSS或原生JS解决方案，而是基于d3的解决方案。每次表中的行更改时，您都可以更改行的类

d3.selectAll("tr.selected").classed("grey",function(d,i){return i%2 == 0});

它每隔一行添加一个
grey
类，并将其从所有其他行中删除。然后可以使用css为行着色

tr.grey {
    background:gray;
}
tr:not(.grey) {
    background:lightgray;
}

下面是一个例子，展示了这一策略的实际应用。
这不是一个完美的解决方案，但您可以在表中使用渐变背景来获得所需的结果

下面是使用表中的渐变背景的示例


tr:未选择（.selected）{
显示：无；
}
桌子{
背景颜色：灰色；
背景图像：线性渐变（透明50%，浅灰色50%）；
背景尺寸：100%36px；
}

A.
B
C
D
E
F
G
H
我
J
E
F
G
H
G
H
G
H
我
J
正如您正确指出的，css交替条纹不起作用的原因是您的行保留在原位，只是使用
display:none隐藏

诀窍是将可见行和隐藏行“分组”在一起，这样我们就不会以取消事件条带化结束。鉴于行的顺序并不重要，我们可以做的是将隐藏行移动到其包含父行的顶部（使用
.insertBefore
）或底部（使用
.appendChild
）。类似于此：

my_circles.each(function(d,i) {
    if (my_bool===true) {
        d3.select(this).classed('selected',true);
        var row = tableRows.get(this);
        row.parentNode.appendChild(row);
        row.classed("selected", true);
    }
});

不幸的是，对于这个问题没有直接的CSS唯一解决方案。主要是因为
：not
选择器与
nth-…
选择器不匹配

您最好的选择是每次通过Javascript重新条带化您的行

加载页面后立即为行添加条带。之后，无论何时更改任何行上的
显示
，都会再次启动stripe函数

下面是一个粗略的例子：


var tab=document.getElementById（“tab”），
btns=tab.getElementsByTagName（“a”），
show=document.getElementById（“show”），
排
;
stripe（）；//在开始处给行打条纹
//条纹本身起作用
函数条带（）{
//选择所有未隐藏的行
rows=tab.querySelectorAll（'tr:not（.hidden'）；
//每隔一行添加一个类
对于（变量x=0；x
表格{宽度：70%；边框：1px实心灰色；边框折叠：折叠；}
td{边框：1px纯灰色；填充：4px；}
tr.hidden{display:none；}
#tab tr.alt{背景色：#ddd；}

一排
第2排
第3排
第4排
第5行


使用什么来切换行的可见性？你有没有做这件事的js？请提供itI更新的帖子，让我知道是否还有其他我可以做的事情来澄清事情。维护表行的顺序重要吗？或者它们可以被洗牌吗？它们可以被洗牌，出于美观的原因，我只希望交替的颜色保持一致。但这不是只有在桌子行高度相同的情况下才起作用吗？如果行高度动态变化，这不是一个真正实用的解决方案。这很有创意！我想有很多行的表可能更难处理。@Terry，是的，你是对的，只有当行的高度没有变化时，这个解决方案才有效。我已经尝试了所有的解决方案，虽然你的解决方案有点长，但它似乎是页面响应速度最快的。谢谢你聪明的工作。@ArashHowaida:不冗长。相关
条带
函数中的实际代码仅为4-5行。Rest是演示的全部设置。
tr.grey {
    background:gray;
}
tr:not(.grey) {
    background:lightgray;
}

my_circles.each(function(d,i) {
    if (my_bool===true) {
        d3.select(this).classed('selected',true);
        var row = tableRows.get(this);
        row.parentNode.appendChild(row);
        row.classed("selected", true);
    }
});