css `nth-child` 选择器基于 dom 中的静态位置索引（如第1、2、3个子元素），而非可见性状态；即使通过 `display: none` 隐藏某些 `
这是前端开发中一个常见但易被误解的 CSS 行为：nth-child(n) 匹配的是在父元素下按文档顺序排列的第 n 个子元素，无论该元素当前是否可见（display: none）、是否被 JS 动态隐藏，甚至是否被 visibility: hidden 遮盖——它始终存在且占据其原始 DOM 位置。
在你的表格过滤逻辑中：
- 所有 <tr> 始终保留在 DOM 中；
- 仅通过切换 table-row-hide / table-row-show 类控制 display；
- 因此 .table-row-show:nth-child(odd) 实际匹配的是「DOM 中第 1、3、5…个 <tr> 且同时拥有 table-row-show 类」的行——而非「当前可见的第 1、3、5…行」。
✅ 正确解法：动态重置序号类（如 row-odd / row-even）
在每次过滤后，遍历所有 当前可见 的行（即 table-row-show），手动为其添加基于可见顺序的样式类：
function updatetable() {
const search = document.getElementById("table-search").value.toLowerCase();
const filterBy = select.value;
const rows = table.querySelectorAll("tr"); // 推荐用 querySelectorAll 替代 getElementsByTagName
// 先统一隐藏
rows.forEach(row => row.classList.remove("table-row-show").add("table-row-hide"));
// 再筛选并标记可见行
const visibleRows = [];
rows.forEach(row => {
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);
}
});
// ✅ 关键步骤：为可见行重新分配奇偶类
visibleRows.forEach((row, index) => {
row.classList.toggle("row-odd", index % 2 === 0);
row.classList.toggle("row-even", index % 2 === 1);
});
}对应 Tailwind CSS（需启用 safelist 或使用 @layer components）或自定义 CSS：
/* 方案一：纯 Tailwind（推荐） */
.row-odd { @apply bg-white dark:bg-gray-900; }
.row-even { @apply bg-gray-50 dark:bg-gray-800; }
/* 方案二：直接内联 class（更轻量） */
/* 在 JS 中：row.className = `table-row-show ${index % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800'}` */⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用 for...in 遍历 HTMLCollection（如 rows[i]），它会枚举原型属性，应改用 for...of、forEach 或传统 for (let i = 0; i < rows.length; i++)；
- getElementsByTagName 返回的是实时 HTMLCollection，而 querySelectorAll 返回静态 NodeList，更适合过滤场景；
- 若表格数据量极大（>1000 行），可考虑虚拟滚动或服务端分页，避免频繁 DOM 操作。
总结：nth-child 是结构选择器，不是状态选择器。当样式依赖于动态可见性时，必须由 JavaScript 主动维护反映真实渲染顺序的类名——这是可控、可预测且符合现代前端实践的解决方案。
