如何为带role="row"的表格行实现不受新增行影响的斑马纹样式

你碰到的核心问题是，CSS的:nth-child(odd)会把<tbody>里所有<tr>（包括你新增的无role="row"的行）都纳入计数范围，导致原本针对带role="row"行的斑马纹被打乱。下面给你两种可行的解决方案，适配你的需求：

方案一：纯CSS（推荐，现代浏览器适用） #

利用CSS的:nth-child(an+b of <selector>)语法，这个语法可以只针对符合选择器的元素进行奇偶计数，完美跳过无role="row"的行。替换你原来的CSS代码即可：

.myclass > tbody > tr[role=row]:nth-child(odd of tr[role=row]) td {
  background-color: #fad;
}

这个方案不需要修改任何JS代码，插入新行后斑马纹会自动保持正确，因为它只统计带role="row"的<tr>元素。需要注意的是，这个语法从Chrome 88、Firefox 78开始支持，如果你需要兼容更老的浏览器，可以看下面的jQuery方案。

方案二：jQuery动态计算（兼容旧环境） #

如果你的项目需要兼容不支持:nth-child(of)语法的浏览器，可以用JS动态给带role="row"的行设置颜色，每次插入新行后重新计算：

首先修改你的JS代码，添加一个更新斑马纹的函数，并在初始化和插入行后调用：

// 定义更新斑马纹的函数
function updateZebraStripes() {
  $('.myclass > tbody > tr[role=row]').each(function(index) {
    // 索引从0开始，index%2===0对应第1、3、5...行（和你原来的odd效果一致）
    if (index % 2 === 0) {
      $(this).find('td').css('background-color', '#fad');
    } else {
      $(this).find('td').css('background-color', ''); // 恢复默认背景
    }
  });
}

$(document).ready(function() {
  // 页面加载时初始化斑马纹
  updateZebraStripes();

  $('tr[role=row]').click(function () {
    if ($(this).attr('data-toggle') != 0) {
      $(this).after('<tr colspan="4"><td>-</td></tr>')
      .attr('data-toggle', 0);
      // 插入新行后立即更新斑马纹
      updateZebraStripes();
    }
  });
});

同时可以去掉原来的CSS斑马纹代码，避免冲突。这个方案的好处是兼容性极强，几乎支持所有浏览器，缺点是需要额外的JS逻辑维护样式。

你提到Temani Afif的第三种方案最适合你，其实上面的纯CSS方案就是这类基于:nth-child(of)的实现，完全不需要改动你的表格结构，直接替换CSS即可生效。

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