最有效隐藏tr行的方法是设置style="display: none"，但恢复时必须设为table-row而非block；推荐用hidden属性或CSS类控制，避免直接操作td/th或依赖默认值。
直接用 display: none 隐藏 tr 行，但必须设对值
给 tr 元素加 style="display: none" 是最常用也最有效的方法，但它不是“设了就完事”。tr 的默认 display 值是 table-row，不是 block 或 inline。如果 JavaScript 里写成 el.style.display = 'block' 来恢复，浏览器会无视——因为表格行不能当块级元素渲染，整行可能不出现或错位。
- 隐藏时写
el.style.display = 'none'安全；恢复时务必写回el.style.display = 'table-row' - 不确定原始值？用
getComputedStyle(el).display读取并缓存，比如：el.dataset.origDisplay = getComputedStyle(el).display - 别在父级
table上设display: none再单独显某行——整张表都消失了，子元素无法 override
hidden 属性比 display: none 更轻量，但兼容性有坑
hidden 是 HTML5 原生布尔属性，语义清晰、无需 CSS，写 <tr hidden> 就能隐藏。它等价于 display: none，同样脱离文档流、不占空间、不可交互。
- 优势：不用管 display 类型，JS 切换只需
el.hidden = true / false，代码更干净 - 坑点：IE 完全不支持；旧版 Safari（≤12）对
tr上的hidden渲染不稳定，部分行可能残留空白或错行 - 若需兼容 IE 或老 Safari，必须降级用
display: table-row+ class 控制
用 class 控制比内联 style 更可靠，尤其配合 JS 动态切换
直接操作 style.display 容易被 CSS 文件里的高优先级规则覆盖（比如 .table-striped tr:nth-child(odd) { display: table-row !important; }），而 class 方式更容易管理权重和复用逻辑。
- CSS 中定义：
.tr-hidden { display: none; } - JS 切换：
el.classList.add('tr-hidden')/el.classList.remove('tr-hidden') - 可组合其他状态，比如
.tr-hidden.is-loading，避免样式冲突 - 注意：如果已有其他类设置了
display（如.collapsed），确保它们没用!important锁死值
千万别对 td 或 th 单独设 display: none 来“隐藏行”
有人想“隐藏某行”，却去遍历该行所有单元格，给每个 td 加 display: none——这会导致表格结构异常：缺失单元格后，浏览器可能自动补列、错列，或让后续 tr 的列宽计算失准，尤其在有 colspan 时几乎必崩。
立即学习“前端免费学习笔记（深入）”；
- 要隐藏整行，只动
tr，不动内部td/th - 如果只是想“视觉上跳过某行”，但保留 DOM 结构（比如供屏幕阅读器读取），改用
visibility: hidden——但注意它仍占位，可能撑高表格 - 需要数据隔离（比如导出时不包含某行），应在 JS 数据层过滤，而不是靠 CSS 隐藏
display: block 或清空 style.display 后依赖 CSS 默认值——而表格行没有“全局默认”，它的行为完全取决于标签类型和浏览器实现。动手前，先看一眼 DevTools 的 Computed 面板里 display 真实值是多少。 
