✅ 正确隐藏表格行用 display: none 或 hidden 属性；恢复时需显式设为 table-row 或用 class 切换；统计时须用 getcomputedstyle 判断可见性，不可依赖 tr.hidden。

直接用 display: none 隐藏 <tr> 行，但必须确保不破坏表格结构 <p>能用，但不是所有场景都安全。浏览器对 <code><tr> 的 <code>display 值有严格要求：它默认是 table-row，强行设成 block 或 inline 会导致整行塌陷、错位甚至渲染异常。

• ✅ 正确写法：tr.style.display = 'none' 或 CSS 中写 tr.hidden { display: none; }
• ❌ 错误写法：tr.style.display = 'block'（恢复时若误用此值，表格立刻错乱）
• ⚠️ 注意：隐藏后，该 <tr> 下所有 <code><td>/<code><th> 自动失效，无需单独处理 <h3>JavaScript 动态控制时，别只改 <code>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>？得加可见性校验 <p>如果你在写 <code>countTotal() 这类汇总逻辑，直接 document.querySelectorAll('tr') 会把 display: none 的行也包进去，导致总数偏高。浏览器不会自动过滤“不可见”的 DOM 节点。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• ✅ 正确判断是否可见：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 类型不能乱设，或者统计函数没做可见性判断，问题往往要等到数据变多、交互变复杂才暴露。</tr>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！