如何选择HTML表格中未设置display:none的奇数行？

问题根源：原CSS使用nth-of-type(even)按DOM结构中的行位置设置背景色，但带style="display: none"的隐藏<tr>仍会占用DOM位置，打乱了显示行的奇偶计数，导致出现连续同色行。

由于CSS选择器无法识别元素的显示状态，只能依赖DOM结构计数，因此需要借助JavaScript实现基于可见行的斑马纹样式，以下是具体方案：

方案1：JavaScript动态设置可见行样式 #

通过JS筛选出所有可见的表格行，再根据它们的显示顺序设置奇偶行样式：

步骤1：添加CSS类 #

.table thead th {
  background: #f6f6f6;
}
/* 可见奇数行的背景色 */
.table>tbody>.visible-odd-row>td {
  background: #f6f6f6;
}

步骤2：编写JavaScript逻辑 #

// 筛选tbody中未隐藏的行
const visibleRows = document.querySelectorAll('.table>tbody>tr:not([style*="display: none"])');

// 遍历可见行，按显示顺序设置类
visibleRows.forEach((row, index) => {
  // 索引从0开始，偶数索引对应显示的第1、3...奇数行
  if (index % 2 === 0) {
    row.classList.add('visible-odd-row');
  } else {
    row.classList.remove('visible-odd-row');
  }
});

如果后续有行显示/隐藏的操作，需要重新执行这段JS代码来更新样式。

方案2：优化隐藏行的实现方式（推荐） #

避免直接用内联style="display: none"隐藏行，改用类控制隐藏，更利于维护和语义化：

步骤1：修改HTML和CSS #

<!-- 用类代替内联样式隐藏行 -->
<tr class="hidden">
  <td>Mary</td>
  <td>Moe</td>
  <td>mary@example.com</td>
</tr>

.hidden {
  display: none;
}

.table thead th {
  background: #f6f6f6;
}
.table>tbody>.visible-odd-row>td {
  background: #f6f6f6;
}

步骤2：调整JS选择器 #

const visibleRows = document.querySelectorAll('.table>tbody>tr:not(.hidden)');
// 后续逻辑同方案1
visibleRows.forEach((row, index) => {
  if (index % 2 === 0) {
    row.classList.add('visible-odd-row');
  } else {
    row.classList.remove('visible-odd-row');
  }
});

为什么纯CSS无法解决？ #

尝试使用tr:not([style*="display: none"]):nth-of-type(odd)这类组合选择器是无效的，因为:nth-of-type基于DOM中的原始位置计数，不会排除被:not过滤掉的隐藏行，仍会导致计数错误。

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