HTML DOM Table tbody 集合（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：表格与 DOM 的协同之道

在网页开发中，表格（Table）是最常见的数据展示方式之一。无论是电商商品列表、用户信息表还是数据分析报告，表格都能以清晰的结构传递信息。而 HTML DOM Table tbody 集合 则是操作表格数据区域的核心工具——它允许开发者通过 JavaScript 动态修改、增删表格内容，甚至实现交互效果。

对于编程初学者，理解 tbody 的集合特性可能稍显抽象，但通过循序渐进的案例和直观的比喻，我们能轻松掌握这一技术。本文将从基础概念出发，逐步深入 tbody 的操作方法，并提供可直接复用的代码示例。

一、HTML 表格的结构解析：理解 tbody 的位置

1.1 表格的基本组成

一个标准的 HTML 表格由三部分构成：

• <table>：定义表格的容器。
• <thead>：包含表头行（Header Rows）。
• <tbody>：包含表格的主体数据行（Body Rows）。
• <tfoot>：可选的表尾行（Footer Rows）。

示例代码：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

比喻：可以将表格比作 Excel 文件，<thead> 是标题栏，<tbody> 是数据录入区域，而 <tfoot> 可能是总计行。

1.2 tbody 的集合特性

在 DOM 中，<tbody> 元素本身是一个集合（HTMLCollection），它包含所有 <tr>（表格行）元素。这意味着：

• tbody 可以通过索引访问单个行（如 tbody[0]）。
• 它支持 length 属性，返回行数。
• 可通过 item() 或 namedItem() 方法获取元素。

关键点：即使表格只有一个 <tbody>，DOM 也会将其视为集合，因此操作时需注意遍历或索引方式。

二、通过 DOM 操作 tbody 集合

2.1 获取 tbody 元素

要操作 tbody，首先需要通过 JavaScript 获取它。常用的方法包括：

• document.querySelector('tbody')：选择第一个 <tbody>。
• document.querySelectorAll('tbody')：获取所有 <tbody> 的集合。
• 直接通过父元素访问，例如：tableElement.tBodies。

示例代码：

// 方法1：通过选择器获取
const tbody = document.querySelector('tbody');

// 方法2：通过 table 的 tBodies 属性
const table = document.getElementById('myTable');
const tbodies = table.tBodies; // 返回所有 tbody 的集合
const firstTbody = tbodies[0];

2.2 遍历 tbody 中的行

由于 tbody 是集合，可使用 for 循环或 Array.from() 转换为数组后操作。

案例：遍历所有行并打印内容：

const tbody = document.querySelector('tbody');
for (let i = 0; i < tbody.rows.length; i++) {
  const row = tbody.rows[i];
  console.log(row.cells[0].textContent); // 输出第一列内容
}

技巧：tbody.rows 是更直接的行集合，等同于 tbody.children，但更符合语义。

2.3 动态增删行：让表格“活起来”

2.3.1 添加新行

通过 insertRow() 或 createElement() 创建行，再用 insertCell() 添加单元格。

示例：点击按钮添加一行：

<button onclick="addRow()">添加行</button>
<script>
function addRow() {
  const tbody = document.querySelector('tbody');
  const newRow = tbody.insertRow(); // 在末尾插入新行
  const cell1 = newRow.insertCell(0);
  cell1.textContent = '李四';
  const cell2 = newRow.insertCell(1);
  cell2.textContent = '30';
}
</script>

2.3.2 删除指定行

通过索引删除行：

function deleteRow(index) {
  const tbody = document.querySelector('tbody');
  if (tbody.rows.length > index) {
    tbody.deleteRow(index);
  }
}

2.4 数据绑定：从数组生成动态表格

结合 JavaScript 数组，可快速将数据填充到 tbody 中。

案例：根据用户输入生成表格：

<input type="text" id="nameInput" placeholder="姓名">
<input type="number" id="ageInput" placeholder="年龄">
<button onclick="addData()">提交</button>
<script>
function addData() {
  const name = document.getElementById('nameInput').value;
  const age = document.getElementById('ageInput').value;
  const tbody = document.querySelector('tbody');
  const newRow = tbody.insertRow();
  newRow.insertCell(0).textContent = name;
  newRow.insertCell(1).textContent = age;
}
</script>

三、高级技巧与常见问题

3.1 性能优化：批量操作 tbody

频繁操作 DOM 会影响性能。建议将多个操作合并成一次：

const tbody = document.querySelector('tbody');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const row = document.createElement('tr');
  // ... 创建单元格 ...
  fragment.appendChild(row);
}
tbody.appendChild(fragment);

3.2 处理多 tbody 的场景

某些复杂表格可能包含多个 <tbody>（如分组数据）。此时需通过 table.tBodies 获取所有集合：

const table = document.querySelector('table');
const allTbodies = table.tBodies;
for (let i = 0; i < allTbodies.length; i++) {
  console.log(allTbodies[i].rows.length); // 输出每个 tbody 的行数
}

四、实战案例：可编辑表格

4.1 需求：实现“双击编辑单元格”功能

通过监听 dblclick 事件，允许用户直接编辑表格内容。

实现步骤：

1. 双击单元格时，将其内容替换为 <input>。
2. 失去焦点时，将输入内容保存回单元格。

完整代码：

<table>
  <thead>...</thead>
  <tbody id="editableBody">
    <tr><td>编辑我</td><td>试试看</td></tr>
  </tbody>
</table>

<script>
document.getElementById('editableBody').addEventListener('dblclick', function(e) {
  if (e.target.tagName === 'TD') {
    const cell = e.target;
    const originalText = cell.textContent;
    const input = document.createElement('input');
    input.value = originalText;
    cell.innerHTML = '';
    cell.appendChild(input);
    input.focus();
    
    input.addEventListener('blur', function() {
      cell.textContent = input.value;
    });
  }
});
</script>

结论：掌握 tbody 集合，解锁动态表格的无限可能

通过本文，我们系统学习了 HTML DOM Table tbody 集合 的核心概念与操作方法。从基础的 DOM 访问、行增删，到高级的数据绑定与交互实现，这些技能能帮助开发者构建出功能丰富的动态表格。

关键总结：

• tbody 是行的集合，支持索引、遍历和动态操作。
• 结合 JavaScript，表格可以成为用户交互的“活文档”。
• 注意性能优化，避免频繁操作 DOM。

建议读者通过代码示例动手实践，并尝试将 tbody 集合与前端框架（如 React、Vue）结合，探索更复杂的场景。掌握这一技术后，你将能更自信地应对数据展示类项目的挑战。