含动态子行的表格如何保持奇偶行颜色交替显示

为什么你的原有写法失效？ #

tr:not(.childrow):nth-child(odd) 不生效的核心原因是：:nth-child(odd) 是基于所有同级<tr>元素计数的，包括你的.childrow子行。比如原本的第3行数据，实际在DOM里是第4个<tr>（前面插了一个子行），所以会被判定为"偶数位置"，导致颜色和上一行重复。

最优解决方案（现代浏览器） #

使用CSS的:nth-child(of <selector>)语法，直接在非子行的<tr>集合内计算奇偶，完全忽略子行的干扰：

/* 非子行的奇数行 */
tr:not(.childrow):nth-child(odd of tr:not(.childrow)) {
  background-color: #f0f0f0;
}

/* 非子行的偶数行 */
tr:not(.childrow):nth-child(even of tr:not(.childrow)) {
  background-color: #ffffff;
}

这个语法会先筛选出所有符合tr:not(.childrow)的兄弟元素，再在这个筛选后的集合里计算奇偶行，完美模拟"无子行时的交替效果"。

兼容旧浏览器的备选方案 #

如果需要适配不支持:nth-child(of <selector>)的旧浏览器（比如Chrome < 112、Firefox < 113），可以用JavaScript动态给非子行添加奇偶类，逻辑更直观：

function updateRowColors() {
  const table = document.querySelector('table');
  let rowCount = 0;
  table.querySelectorAll('tr').forEach(tr => {
    if (!tr.classList.contains('childrow')) {
      rowCount++;
      // 移除旧类，添加新的奇偶类
      tr.classList.remove('odd', 'even');
      tr.classList.add(rowCount % 2 === 1 ? 'odd' : 'even');
    }
  });
}

// 页面初始化时调用，动态添加子行后也需调用
updateRowColors();

对应CSS样式：

tr.odd { background-color: #f0f0f0; }
tr.even { background-color: #ffffff; }

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