Angular中隐藏行后如何重新应用表格条纹样式

这个坑我踩过！问题根源在于你用的nth-child伪类是基于DOM节点的位置计数的——哪怕行被设置了display:none，它依然存在于DOM结构里，nth-child还是会把它算进去，导致视觉上的行顺序和CSS计数的奇偶性对不上，条纹自然就乱了。

下面给你几个靠谱的解决方案，按兼容性和实用性排序：

方法1：用JavaScript动态给可见行添加条纹类（最推荐） #

这种方法兼容性拉满，不管什么浏览器都能正常工作，逻辑也清晰。

步骤1：定义条纹样式的CSS类 #

先把原来的nth-child样式换成类选择器：

.table-stripe {
  background-color: #f2f2f2; /* 替换成你的条纹颜色 */
}

步骤2：写一个更新条纹的函数 #

这个函数会遍历表格里的所有可见行，重新给偶数行（或奇数行）添加条纹类：

function refreshTableStripes(tableElement) {
  // 获取tbody里所有没被隐藏的行
  const visibleRows = tableElement.querySelectorAll('tbody tr:not([style*="display:none"])');
  
  visibleRows.forEach((row, index) => {
    // 先清除之前的条纹类，避免重复添加
    row.classList.remove('table-stripe');
    // 给索引为奇数的行（视觉上的第2、4...行）加条纹类
    if (index % 2 === 1) {
      row.classList.add('table-stripe');
    }
  });
}

步骤3：在隐藏/显示行后调用函数 #

比如你通过按钮隐藏某行后，立刻调用这个函数更新条纹：

// 示例：隐藏ID为"target-row"的行
document.getElementById('target-row').style.display = 'none';
// 传入你的表格元素，更新条纹
refreshTableStripes(document.getElementById('your-table-id'));

方法2：从DOM中移除隐藏行（替代方案） #

如果你的业务场景允许，不用display:none隐藏行，而是直接把行从DOM里移走（可以暂存到一个隐藏容器里），这样原来的nth-child样式就会自动重新计算：

// 暂存要隐藏的行
const rowToHide = document.getElementById('target-row');
const tempHolder = document.createElement('div');
tempHolder.style.display = 'none';
document.body.appendChild(tempHolder);
tempHolder.appendChild(rowToHide);

// 要恢复显示时，把行放回表格
document.getElementById('your-table-id').querySelector('tbody').appendChild(rowToHide);

这种方法下，你原来的nth-child CSS（比如table tr:nth-child(even) { background: #f2f2f2; }）就能正常工作，因为DOM结构变了，行的位置重新排序了。

方法3：用CSS :has 选择器（仅现代浏览器支持） #

如果你的目标浏览器都是新版本（Chrome 101+、Firefox 121+），可以用CSS的:has伪类来筛选可见行，不过兼容性不如前两种方法：

table tbody tr:nth-child(even of :not([style*="display:none"])) {
  background-color: #f2f2f2;
}

要是你是用类来控制隐藏（比如.hidden { display:none; }），记得把选择器里的[style*="display:none"]换成.hidden。

内容的提问来源于stack exchange，提问作者Kevin