您现在的位置是：网站首页 > <tbody>-表体部分文章详情

<tbody>-表体部分

陈川【 HTML 】 40682人已围观 3580字

<tbody> 是 HTML 表格中用于定义表格主体内容的标签，通常与 <thead> 和 <tfoot> 配合使用。它包裹表格的主要数据行，便于样式控制和脚本操作。

`<tbody>` 的基本结构

<tbody> 必须嵌套在 <table> 内，包含一个或多个 <tr>（表格行）。如果未显式定义 <tbody>，浏览器会隐式包裹所有非 <thead>/<tfoot> 的行。例如：

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

隐式与显式 `<tbody>`

即使不写 <tbody>，DOM 也会自动生成。以下两种写法在渲染结果上等价：

<!-- 隐式 tbody -->
<table>
  <tr><td>内容A</td></tr>
</table>

<!-- 显式 tbody -->
<table>
  <tbody>
    <tr><td>内容A</td></tr>
  </tbody>
</table>

但显式声明更利于通过 CSS 或 JavaScript 精准控制：

// 选中所有显式定义的 tbody
document.querySelectorAll('tbody');

多 `<tbody>` 的分段控制

一个表格可包含多个 <tbody>，实现数据分组。例如按年级分组的学生表：

<table>
  <thead><tr><th>学号</th><th>姓名</th></tr></thead>
  <tbody>
    <tr><td>101</td><td>一年级学生A</td></tr>
    <tr><td>102</td><td>一年级学生B</td></tr>
  </tbody>
  <tbody>
    <tr><td>201</td><td>二年级学生A</td></tr>
  <tr><td>202</td><td>二年级学生B</td></tr>
  </tbody>
</table>

样式与交互增强

通过 CSS 可单独设置 <tbody> 样式。例如隔行变色：

tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

结合 JavaScript 实现动态效果：

document.querySelector('tbody').addEventListener('click', (e) => {
  if (e.target.tagName === 'TD') {
    e.target.style.backgroundColor = '#ffeb3b';
  }
});

动态内容操作

通过 DOM API 动态修改 <tbody> 内容：

const tbody = document.querySelector('tbody');
const newRow = document.createElement('tr');
newRow.innerHTML = '<td>动态添加</td><td>数据</td>';
tbody.appendChild(newRow);

// 批量更新
tbody.innerHTML = `
  <tr><td>新数据1</td><td>详情</td></tr>
  <tr><td>新数据2</td><td>详情</td></tr>
`;

与 `<thead>` 和 `<tfoot>` 的协作

三者配合时，<tbody> 必须位于 <thead> 之后、<tfoot> 之前（尽管渲染时页脚可能在底部）：

<table>
  <thead><tr><th>标题</th></tr></thead>
  <tfoot><tr><td>总计</td></tr></tfoot>
  <tbody>
    <tr><td>数据行1</td></tr>
    <tr><td>数据行2</td></tr>
  </tbody>
</table>

可访问性考虑

为 <tbody> 添加 ARIA 属性提升无障碍体验：

<tbody aria-live="polite" aria-relevant="additions removals">
  <!-- 动态内容 -->
</tbody>

实际应用场景

分页加载数据

async function loadPage(page) {
  const response = await fetch(`/api/data?page=${page}`);
  const data = await response.json();
  const tbody = document.querySelector('#dataTable tbody');
  tbody.innerHTML = data.map(item => `
    <tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
    </tr>
  `).join('');
}

表格排序功能

function sortTable(columnIndex) {
  const tbody = document.querySelector('tbody');
  const rows = Array.from(tbody.rows);
  rows.sort((a, b) => 
    a.cells[columnIndex].textContent.localeCompare(b.cells[columnIndex].textContent)
  );
  tbody.append(...rows);
}

性能优化建议

当处理大型数据集时：

使用文档片段减少重绘：

const fragment = document.createDocumentFragment();
data.forEach(item => {
  const tr = document.createElement('tr');
  tr.innerHTML = `<td>${item.id}</td><td>${item.value}</td>`;
  fragment.appendChild(tr);
});
tbody.appendChild(fragment);

虚拟滚动技术只渲染可见区域的 <tbody> 行。

与其他技术的结合

在 Vue/React 中动态生成 <tbody>：

// React 示例
function DataTable({ data }) {
  return (
    <table>
      <tbody>
        {data.map((row, i) => (
          <tr key={i}>
            <td>{row.name}</td>
            <td>{row.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}