Javascript CSS中N个颜色的着色行

我有一个HTML表，由外部代码动态重写

第一列是分组列，同一组中的行始终是连续的

应用动态筛选器时，所有与筛选器不匹配的行都将被第三方隐藏。秩序永不改变

问题是，客户机希望用行分隔组，但当过滤开始时，设计用于分隔组的行就会消失

目前，我通过在行生成时向行添加“row-group-N”类并编写以下CSS来解决此问题：

.row                        {border-top: 1px solid black}
.row-group-N + .row-group-N {border-top: none}

（N为组计数器模

Max

）

编辑：

下面是一个演示：

马克斯在这里被设定为三。根据CSS，粗体行表示组的开始。当您搜索“things”时，您将看到结果是不正确的，这是因为类被包围了

编辑结束

它的工作原理是向每个元素添加分隔符，但在连续元素属于同一组时删除分隔符。但在最坏的情况1/

Max

下，该行不显示在正确位置的可能性很小。这是因为我总是有有限数量的CSS类用于此目的。

我自己正在寻找一种方法来确定过滤代码何时完成执行，以便能够使用JavaScript执行更改

---

但是我还能做些什么吗？

看来js是你在这里唯一能做的事情。老实说，我没有满足你的要求，感觉太过理论化了。无论如何，在这个例子中，添加某种可视化可能会帮助您获得一些好的答案。@BjornJohnson添加了一个示例来演示我的问题，我相信@Chris是正确的。JS是一条路要走。我不认为有一个明显的方法来解决这个问题，特别是因为您收到了HTML表。