最稳妥做法是执行 document.querySelectorAll('tbody').forEach(el => el.remove())；删后表格仍正常显示因浏览器会自动创建隐式 tbody，但 JS 查询路径和 CSS 选择器需相应调整。

用 JavaScript 批量移除所有 tbody 元素

直接删掉所有 tbody 标签是可行的，但得小心：浏览器会自动补全 tbody，即使你写的是没有它的表格，DOM 中它也大概率存在。所以「批量删除」本质是操作 DOM 节点，不是改 HTML 字符串。

最稳妥的做法是选中所有 tbody 并调用 remove()：

document.querySelectorAll('tbody').forEach(el => el.remove());

注意别用 innerHTML = '' 或 textContent = ''，那会清空内容但留着空 tbody 标签；也别用 parentNode.removeChild() 手动写，remove() 更简洁且兼容现代浏览器（IE 不支持，如需兼容请用 removeChild 配合循环）。

为什么删了 tbody 表格还能正常显示？

因为 HTML 规范允许省略 tbody，浏览器解析时会自动包裹 tr 到一个隐式 tbody 里。你手动删掉后，只要 table 下还有 tr，渲染不受影响——但 JS 查询 tr 时路径就变了：table > tr 不成立，得写 table > tbody > tr 或更宽松的 table tr。

• 删前：document.querySelector('table').children 返回 [tbody]
• 删后：document.querySelector('table').children 可能返回 [tr, tr, ...]（取决于是否触发重排和浏览器行为）
• 后续脚本若依赖 tbody 存在，就会报错 Cannot read property 'querySelectorAll' of null

用正则批量替换 HTML 字符串里的 tbody？不推荐

如果是在构建流程里处理静态 HTML 文件（比如用 Node.js 脚本预处理模板），有人想用正则删掉 ...。这很危险：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 嵌套结构（如 tbody 里再有 table）会让正则失灵
• 自闭合写法（）或大小写混用（）会漏匹配
• 注释、属性值里含类似字符串（data-html=""）会被误伤

  真要处理源码，请用 HTML 解析器，比如 Node.js 里用 cheerio：

  const $ = cheerio.load(html);<br>$('tbody').remove();<br>return $.html();

  删完 tbody 后 CSS 和事件监听还有效吗？

  大部分情况下有效，但要注意选择器和事件委托的绑定路径：

  • CSS 中写 tbody tr:hover 会失效，得改成 table tr:hover 或去掉 tbody
  • 用 document.addEventListener('click', e => { if (e.target.matches('tbody tr')) {...} }) 也会失效，应改用 e.target.closest('tr') 判断
  • jQuery 的 $('tbody tr') 查不到结果，得换成 $('table tr') 或先确保 tbody 存在

  真正容易被忽略的，是那些没写在主逻辑里、散落在各处的「假设 tbody 必然存在」的代码片段——它们不会立刻报错，但会在某个边缘场景下静默失效。

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