当通过 javascript 切换 `.table-row-hide`/`.table-row-show` 类控制表格行显隐时，`nth-child(odd/even)` 背景色不会重算，因为 `display: none` 不改变 dom 顺序，仅隐藏渲染——需改用基于可见性动态标记的类策略。
nth-child 是一个结构化伪类，它完全依据元素在父容器中的 DOM 位置（即第几个子节点）进行匹配，与元素是否可见、是否具有特定类名无关。即使你将某行设为 display: none，它依然占据其原始位置，后续行的 :nth-child(2)、:nth-child(3) 等索引值完全不变。因此，.table-row-show:nth-child(odd) 实际上匹配的是“在 DOM 中处于奇数位置 且 同时拥有 .table-row-show 类”的行——而这些位置在过滤后往往已不连续，导致斑马纹错乱。
✅ 正确解法：重置可见行的序号逻辑
不再依赖 nth-child，而是为当前所有可见行重新分配序号类（如 .row-1, .row-2, .row-odd, .row-even），再通过 CSS 针对这些类设置样式：
function updatetable() {
const search = document.getElementById("table-search").value.toLowerCase();
const filterBy = select.value;
const rows = Array.from(table.querySelectorAll("tr")); // 转为数组便于操作
// 第一步：统一隐藏所有行
rows.forEach(row => row.classList.remove("table-row-show").add("table-row-hide"));
// 第二步：筛选并显示匹配行，并动态添加序号类
const visibleRows = [];
for (const row of rows) {
let txtValue = "";
if (filterBy === "name" && row.querySelector("th")) {
txtValue = row.querySelector("th").textContent || row.querySelector("th").innerText;
}
if (txtValue.toLowerCase().includes(search)) {
row.classList.remove("table-row-hide").add("table-row-show");
visibleRows.push(row);
}
}
// 第三步：为可见行重新应用 odd/even 类（关键！）
visibleRows.forEach((row, index) => {
row.classList.toggle("row-odd", index % 2 === 0);
row.classList.toggle("row-even", index % 2 === 1);
});
}对应 Tailwind 兼容的 CSS（或直接使用 Tailwind 的 odd:/even: 变体，见下文替代方案）：
/* 推荐：纯 CSS 方案 */
.row-odd { @apply bg-white dark:bg-gray-900; }
.row-even { @apply bg-gray-50 dark:bg-gray-800; }
.table-row-hide { display: none; }? 更优实践：利用 Tailwind 的 状态变体 + 动态类管理
如果你使用 Tailwind v3.3+，可完全避免自定义 CSS，改用 odd: 和 even: 工具类，但需确保它们作用于连续的可见行容器。例如，将所有 .table-row-show 行移动到一个临时
// 替代方案：直接应用 Tailwind 预设类（无需额外 CSS）
visibleRows.forEach((row, i) => {
row.classList.toggle("bg-white dark:bg-gray-900", i % 2 === 0);
row.classList.toggle("bg-gray-50 dark:bg-gray-800", i % 2 === 1);
});⚠️ 注意事项：
- 避免使用 for...in 遍历 HTMLCollection（它会枚举原型属性，不可靠），始终用 Array.from() 或 for...of；
- getElementsByTagName 返回的是实时集合，可能引发性能问题，querySelectorAll 返回静态 NodeList 更安全；
- 若表格数据量大（>100 行），考虑节流 input 事件（如 lodash.throttle）；
- 如需无障碍支持，请同步更新 aria-hidden 属性。
总结：nth-child 是 DOM 结构的快照，不是视觉状态的代理。要实现动态斑马纹，必须主动维护可见元素的逻辑序号——这是前端表格交互中一个经典且高频的陷阱，也是理解 CSS 伪类底层机制的重要一课。
立即学习“前端免费学习笔记（深入）”；
