CSS 中具有 N 种颜色的着色行

问：

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

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

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

问题在于，客户端希望将行分隔为分隔组，但是当过滤开始时，设计用于此操作的行会消失。

目前，我通过向行添加“row-group-N”类来解决这个问题，因为它们会生成，并编写以下CSS：

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

（其中 N 是群计数器模Max)

编辑：

下面是一个演示：https://plnkr.co/edit/Zzh9olmmLafs1Y8lCoZB?p=preview

Max 在这里设置为 3。粗体行表示组的开始，根据 CSS。当您搜索“事物”时，您会看到结果不正确，因为类被换行了。

编辑结束

它的工作原理是将分隔符添加到每个元素，但当连续元素属于同一组时将其删除。但是最坏的情况是，该行未显示在正确位置的几率为 1/Max。这是因为我总是有有限数量的CSS类来达到这个目的。

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

但是我还能做些什么吗？