异常教程

HTML DOM Table 对象（手把手讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，表格（Table）是展示结构化数据的重要工具。无论是电商商品列表、用户信息汇总，还是动态数据看板，表格都能以清晰的视觉形式传递信息。然而，当需要通过 JavaScript 动态修改表格内容、响应用户交互，或是实现复杂功能时，掌握 HTML DOM Table 对象 的操作方法就显得尤为重要。

本文将从基础到进阶，结合代码示例和实际案例，深入讲解如何通过 DOM API 对表格进行增删改查、样式控制、事件绑定等操作。无论你是刚接触前端开发的初学者，还是希望提升 DOM 操作技能的中级开发者，都能通过本文获得实用的知识与技巧。

HTML 表格基础：标签与结构

在深入 DOM 操作之前，我们需要先理解 HTML 表格的标签结构。一个标准的表格由以下标签构成：

  • <table>：定义表格的容器。
  • <tr>：定义表格行（Row）。
  • <th>：定义表头单元格（Header Cell），通常显示为加粗文本。
  • <td>：定义标准数据单元格（Data Cell）。
  • <caption>：可选标签，用于添加表格标题。
  • <thead>、<tbody>、<tfoot>：用于分隔表头、主体和页脚区域。

示例代码：

<table id="product-table">
  <caption>商品信息表</caption>
  <thead>
    <tr>
      <th>商品名称</th>
      <th>价格（元）</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>5999</td>
      <td>100</td>
    </tr>
    <tr>
      <td>无线耳机</td>
      <td>399</td>
      <td>500</td>
    </tr>
  </tbody>
</table>

通过这些标签，我们可以构建一个静态表格。接下来，我们将通过 DOM API 动态操作这些元素。

DOM 中的 Table 对象：访问与属性

在 JavaScript 中，通过 document.getElementById() 或其他选择器获取表格元素后，会得到一个 HTMLTableElement 对象。这个对象提供了许多属性和方法，帮助我们直接操作表格的行、列、单元格等。

核心属性与方法

  1. rows：返回表格中所有 <tr> 元素的集合（HTMLCollection）。
    • 示例：table.rows.length 可获取表格的行数。
  2. tBodies：返回一个包含所有 <tbody> 元素的集合。
  3. caption：获取或设置表格的标题。
  4. insertRow()：在指定位置插入新行，参数为行索引（默认为末尾）。
  5. deleteRow()：删除指定索引的行。

访问示例：

const table = document.getElementById("product-table");
console.log(table.rows.length); // 输出：2（示例代码中的两行数据）
console.log(table.caption.textContent); // 输出："商品信息表"

操作表格行（Rows）：增删改查

插入与删除行

通过 insertRow() 和 deleteRow() 方法，可以动态调整表格的行数：

// 在表格末尾插入新行
const newRow = table.insertRow(); // 等同于 table.insertRow(-1)
const newCell = newRow.insertCell();
newCell.textContent = "新商品"; // 需要手动添加单元格

// 在第一行位置插入新行（索引0）
const rowAtFirst = table.insertRow(0);
rowAtFirst.insertCell().textContent = "前置商品";
rowAtFirst.insertCell().textContent = "1000";
rowAtFirst.insertCell().textContent = "200";

修改行内容

通过遍历 rows 集合，可以批量修改行的样式或数据：

// 将所有行的背景色设为灰色
for (let i = 0; i < table.rows.length; i++) {
  table.rows[i].style.backgroundColor = "#f0f0f0";
}

操作表格列（Columns）：隐藏与样式控制

HTML 标准中没有直接表示“列”的标签，但可以通过遍历行和单元格（cells）来实现列操作。

隐藏某一列

假设我们要隐藏“库存”列（假设其索引为2）：

// 遍历所有行
for (let i = 0; i < table.rows.length; i++) {
  // 获取当前行的第3个单元格（索引从0开始）
  const cell = table.rows[i].cells[2];
  cell.style.display = "none"; // 隐藏该单元格
}

根据列内容排序

例如，按“价格”列对表格排序：

// 将rows转换为可排序的数组
const rows = Array.from(table.tBodies[0].rows);
rows.sort((a, b) => {
  const aPrice = parseInt(a.cells[1].textContent);
  const bPrice = parseInt(b.cells[1].textContent);
  return aPrice - bPrice;
});

// 重新插入排序后的行
table.tBodies[0].append(...rows);

动态创建表格：从零开始构建

有时我们需要完全通过 JavaScript 生成表格。以下是构建表格的步骤：

// 创建表格容器
const table = document.createElement("table");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");

// 创建表头行
const headerRow = document.createElement("tr");
["名称", "价格", "库存"].forEach(text => {
  const th = document.createElement("th");
  th.textContent = text;
  headerRow.appendChild(th);
});
thead.appendChild(headerRow);

// 创建数据行
const data = [
  { name: "手机", price: 2999, stock: 300 },
  { name: "平板", price: 1999, stock: 200 }
];
data.forEach(item => {
  const row = document.createElement("tr");
  ["name", "price", "stock"].forEach(key => {
    const cell = document.createElement("td");
    cell.textContent = item[key];
    row.appendChild(cell);
  });
  tbody.appendChild(row);
});

// 组合并插入DOM
table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table);

实际案例：可交互的购物车表格

假设我们希望实现一个购物车，用户可以动态添加商品并更新总价。

核心代码

// 表格容器
const cartTable = document.getElementById("cart-table");
const tbody = cartTable.querySelector("tbody");

// 添加商品按钮的点击事件
document.getElementById("add-item-btn").addEventListener("click", () => {
  const newItem = {
    name: "新商品",
    price: 500,
    stock: 100
  };

  // 创建新行
  const newRow = tbody.insertRow();
  ["name", "price", "stock"].forEach(key => {
    const cell = newRow.insertCell();
    cell.textContent = newItem[key];
  });

  // 更新总价（假设最后一行是合计）
  const totalRow = cartTable.querySelector("tfoot tr");
  const newTotal = parseInt(totalRow.cells[1].textContent) + newItem.price;
  totalRow.cells[1].textContent = newTotal;
});

常见问题与最佳实践

问题1：索引越界

操作行或列时，需确保索引在有效范围内。例如，table.rows[5] 在表格只有3行时会返回 undefined。

问题2：浏览器兼容性

部分旧版浏览器可能对 tBodies 或 insertRow() 的支持有限，建议通过 querySelector 直接获取 <tbody> 元素。

最佳实践

  1. 批量操作：对表格进行多次修改时，先将元素移出 DOM（如 documentFragment），最后一次性插入，避免频繁重绘。
  2. 性能优化：避免在循环中频繁操作 DOM，尽量将数据处理与 DOM 操作分离。

结论

通过掌握 HTML DOM Table 对象 的核心属性与方法，开发者可以轻松实现表格的动态增删、交互更新、数据绑定等高级功能。无论是电商商品列表、数据看板，还是用户操作记录，DOM 操作都能让表格从静态展示工具升级为灵活的交互组件。

本文通过循序渐进的讲解和代码示例，帮助读者从基础标签结构逐步过渡到复杂场景的实现。希望这些内容能成为你开发过程中的一份实用指南，让表格在你的项目中发挥更大的价值！

最新发布

查看更多文章