display: none 是隐藏 tr 的唯一推荐方式，它彻底移除渲染和占位；应避免 visibility: hidden 或 opacity: 0，恢复时需显式设回 table-row，推荐用 css 类而非内联样式控制。
直接用 display: none 隐藏 tr 是最稳妥的方式
只要目标是彻底移除某行的渲染和占位，display: none 就是唯一推荐的选择。它让浏览器完全跳过该 tr 的布局计算，不会留下空白、不影响表格对齐，也不干扰后续行的样式继承。
常见错误是误用 visibility: hidden 或 opacity: 0：前者保留高度和间距，导致表头与数据错位；后者仍响应点击、仍参与 tab 键导航，且无法阻止键盘焦点落入隐藏内容中。
-
tr元素默认 display 类型是table-row，所以设为none后恢复时必须显式设回table-row（或用 class 切换，见下条） - 不要给
tr设display: block或flex—— 这会破坏表格语义和渲染模型，可能导致列宽塌缩或边框断裂 - 若表格用了
border-collapse: collapse，隐藏某行后相邻行的边框可能“意外连接”，这是正常行为，无需额外修复
用 class 切换比直接操作 style.display 更安全
硬编码 el.style.display = 'none' 看似快，但一旦元素原本有内联 display: table-row-group（比如 tbody 里的 tr）或被其他脚本动态设置过 display 值，恢复时就容易出错 —— 你很难准确还原原始值。
更可靠的做法是定义一个 CSS 类，由 JS 控制开关：
.hidden-row { display: none; }
然后统一用 classList.toggle('hidden-row') 或 classList.add()/remove()。
- 避免在 CSS 中写
tr.hidden-row { display: none !important; }——!important会让调试变得困难，且可能覆盖掉响应式断点中的 display 设置 - 如果表格由模板引擎（如 Vue 的
v-for）生成，确保该 class 能被正确绑定，而不是被框架 strip 掉 - 多个条件共存时（比如“状态=待审”且“创建时间document.querySelectorAll('tr[data-status="pending"][data-age="recent"]')
批量隐藏多行时，别依赖 nth-child 或索引
用 tr:nth-child(3) 隐藏第三行？只要表格结构稍变（比如服务端插入一行 summary、前端加了 sticky header），选择器就失效。真正可维护的方式，是给目标行打语义化标记。
例如，在生成 HTML 时就加上 data-role="summary" 或 data-category="archive"：
<tr data-category="archive"> <td>旧订单</td> <td>2024-03-15</td> </tr>
JS 操作就变成：
document.querySelectorAll('tr[data-category="archive"]').forEach(tr => tr.classList.toggle('hidden-row'));
- 不要用
id批量管理 —— id 必须唯一，动态生成时极易冲突 - 避免用
class当筛选依据（如class="archive"），除非你能保证这个 class 不会被其他样式或 JS 逻辑复用 - 如果表格含
colspan或rowspan，隐藏某行前先确认它不作为跨行单元格的“锚点”，否则可能引发渲染异常（如内容错位、边框断裂）
注意 thead/tbody 分离带来的 DOM 查询陷阱
很多开发者只查 tbody tr，却忘了 thead 里也可能有需要同步控制的行（比如带筛选控件的表头行）。更糟的是，有些框架或 CMS 会把 thead 和 tbody 拆成两个独立的 table 元素，这时 tr 根本不在同一个父容器下。
安全做法是：明确你要控制的范围，然后分别查询：
const targetRows = [
...document.querySelectorAll('thead tr[data-category="control"]'),
...document.querySelectorAll('tbody tr[data-category="archive"]')
];
targetRows.forEach(tr => tr.classList.toggle('hidden-row'));
- 如果用了
tfoot，也得一并包含进去，否则页脚行会“悬空”显示 - Shadow DOM 场景下，
querySelectorAll默认查不到影子树内的tr，需用shadowRoot.querySelectorAll - 隐藏后若触发了表格重绘（比如 resize、scroll），某些老版本 Safari 可能短暂闪现被隐藏行，加
will-change: display无实质帮助，唯一解法是确保初始状态就在 HTML 中设好class="hidden-row"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
