display: none 是隐藏表格行最直接可靠的方式，因其彻底移除布局空间、不影响边框合并、被 table.rows 自动排除且不干扰屏幕阅读器；但需用 class 切换而非硬编码 style，避免覆盖外部样式，并注意统计时过滤隐藏行。
display: none 是最直接、最可靠的隐藏表格行的方式，但它不是“万能开关”——它会彻底移除 tr 元素的布局空间，影响后续计算和可访问性，必须配合显隐逻辑一起使用。
为什么用 display: none 而不是 visibility: hidden？
visibility: hidden 会让 tr 保留高度和位置，导致表格出现空白行，视觉上像“卡住”，且无法被屏幕阅读器跳过；display: none 则真正从渲染树中剔除该行，不影响其他行的对齐、边框合并（border-collapse）或后续 JS 遍历逻辑（比如 table.rows 会自动排除它）。
- 用
visibility: hidden隐藏tr后，tr.offsetHeight仍大于 0，可能干扰滚动定位或高度自适应逻辑 -
display: none下，tr不参与table的行计数，table.tBodies[0].rows.length会实时反映可见行数 - 若表格启用了
border-collapse: collapse，visibility: hidden可能导致相邻行边框异常连接
动态控制时，别直接操作 style.display 属性
硬编码 tr.style.display = 'none' 看似简单，但容易覆盖外部 CSS 规则（比如媒体查询或主题样式），且难以统一管理显隐状态。更稳妥的做法是切换 class：
- 定义 CSS：
.tr-hidden { display: none; } - JS 控制：
tr.classList.add('tr-hidden')/tr.classList.remove('tr-hidden') - 这样既保留层叠优先级可控性，也方便用
:not(.tr-hidden)写后续选择器
用 document.currentScript 隐藏当前脚本所在行（CMS/模板场景）
当 HTML 是由后端模板或 CMS 自动生成、无法提前加 id 或 class 时，document.currentScript 是唯一不依赖预设标识的精准定位方式：
- 确保脚本是同步内联执行（无
async或defer） - 在
td内写：<script>document.currentScript.closest('tr').classList.add('tr-hidden')</script> - 注意：IE 不支持
closest()，如需兼容，可用document.currentScript.parentNode.parentNode（前提是script确实在td里）
隐藏后，透视表求和或统计容易漏掉“看不见的行”
很多动态过滤表格在 JS 中做汇总时，习惯用 table.querySelectorAll('tr') 或 table.rows 全量遍历，但 table.rows 已自动排除 display: none 行，而 querySelectorAll 不会——它返回所有匹配节点，无论是否隐藏。
- 错误写法：
Array.from(table.querySelectorAll('tr td')).reduce(...)→ 会累加隐藏行里的td - 正确写法：
Array.from(table.rows).filter(r => getComputedStyle(r).display !== 'none').flatMap(r => r.cells) - 更轻量判断：
r.style.display !== 'none'仅适用于内联设置，不推荐；应优先用getComputedStyle
真正麻烦的不是怎么藏，而是藏完之后，别人（包括你自己写的统计函数）还当它在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
