✅ 正确隐藏表格行用 display: none 或 hidden 属性；恢复时需显式设为 table-row 或用 class 切换；统计时须用 getComputedStyle 判断可见性，不可依赖 tr.hidden。
直接用 display: none 隐藏 <tr> 行，但必须确保不破坏表格结构
能用，但不是所有场景都安全。浏览器对 <tr> 的 display 值有严格要求：它默认是 table-row，强行设成 block 或 inline 会导致整行塌陷、错位甚至渲染异常。
- ✅ 正确写法：
tr.style.display = 'none'或 CSS 中写tr.hidden { display: none; } - ❌ 错误写法：
tr.style.display = 'block'（恢复时若误用此值，表格立刻错乱） - ⚠️ 注意：隐藏后，该
<tr>下所有<td>/<th>自动失效，无需单独处理
JavaScript 动态控制时，别只改 style.display 就完事
常见错误是点击按钮后元素没出现——你以为清空 style.display 就能恢复，其实不行。空字符串 '' 不会回退到原始 table-row，而是继承父级或 CSS 规则里的值，结果可能还是 none。
- ✅ 安全恢复方式：
tr.style.display = 'table-row'（明确指定） - ✅ 更健壮做法：先存原始值，
tr.dataset.originalDisplay = getComputedStyle(tr).display，之后设回tr.style.display = tr.dataset.originalDisplay - ✅ 推荐用 class 切换：
tr.classList.add('hidden')/.remove('hidden')，CSS 里定义.hidden { display: none; }
隐藏行后，统计函数仍遍历所有 <tr>？得加可见性校验
如果你在写 countTotal() 这类汇总逻辑，直接 document.querySelectorAll('tr') 会把 display: none 的行也包进去，导致总数偏高。浏览器不会自动过滤“不可见”的 DOM 节点。
- ✅ 正确判断是否可见：
getComputedStyle(tr).display !== 'none' - ✅ 实操示例：
let sum = 0; document.querySelectorAll('tr').forEach(tr => { if (getComputedStyle(tr).display !== 'none') { const cell = tr.querySelector('td:last-child'); if (cell) sum += parseFloat(cell.textContent) || 0; } }); - ⚠️ 注意：
tr.hidden属性（HTML5）和display: none无直接关联，不能靠tr.hidden === true判断 CSS 隐藏状态
用 hidden 属性替代 display: none？语义更好，但兼容性和行为有差异
hidden 是 HTML5 原生布尔属性，语义上表示“此元素不参与当前文档流”，效果等价于 display: none，但它不依赖 CSS，也不受样式覆盖影响。
立即学习“前端免费学习笔记（深入）”；
- ✅ 写法简单：
<tr hidden><td>被隐藏的行</td></tr> - ✅ JS 控制：
tr.hidden = true/false，比操作style.display更干净 - ⚠️ 兼容性：IE 不支持，如需兼容 IE11 及更旧版本，必须 fallback 到
display: none - ⚠️ 注意：
hidden不会触发重排（reflow），但display: none会；两者对屏幕阅读器行为一致（跳过）
<tr> 的 display 类型不能乱设，或者统计函数没做可见性判断，问题往往要等到数据变多、交互变复杂才暴露。 
