异常教程

HTML DOM Table rows 集合（千字长文）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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）是数据展示的核心工具之一。无论是展示用户信息、订单列表，还是统计数据，表格都能以结构化的方式清晰传递信息。然而，当需要动态修改表格内容（例如添加行、删除行或实时更新数据）时，开发者必须深入理解 HTML DOM Table rows 集合 的操作逻辑。本文将从基础概念到实战案例，逐步解析如何通过 DOM 操作表格行，帮助开发者高效掌控这一技能。

一、表格的结构与 rows 集合的基本概念

1.1 表格的 HTML 结构

HTML 表格由 <table> 标签定义，其核心元素包括：

  • <tr>：定义表格行（Table Row）。
  • <th>：定义表头单元格（Header Cell）。
  • <td>：定义标准单元格（Data Cell）。

示例代码：

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

1.2 rows 集合的含义

rows 是 HTML DOM 中用于访问表格行的集合（Collection）。通过 tableElement.rows，开发者可以获取一个类似数组的对象，包含表格中所有 <tr> 元素。

  • 类数组特性：rows 集合支持索引访问（如 rows[0] 获取第一行），但并非真正的数组，需注意其方法限制（例如不能直接使用 map()）。
  • 动态更新：当表格内容变化时，rows 集合会实时反映最新状态。

比喻：
可以将 rows 想象成一个书架上的书本集合。每本书（行）的位置、内容都可以通过索引快速访问，而书架（表格）本身会随着书籍的增减自动更新。

二、如何通过 DOM 操作 rows 集合

2.1 获取 rows 集合

首先需要通过 DOM 选择器定位到目标表格，再调用 .rows 属性。

代码示例：

// 通过 ID 选择表格
const table = document.getElementById("myTable");
const rows = table.rows;

// 获取第二行（索引从 0 开始）
const secondRow = rows[1];

2.2 获取单个行对象的属性

每个行对象（HTMLTableRowElement）包含以下常用属性：

  • rowIndex：返回该行在表格中的索引（从 0 开始）。
  • cells：返回该行所有 <td> 或 <th> 单元格的集合。

示例：

// 输出某行的单元格内容
const firstRowCells = rows[0].cells;
for (let i = 0; i < firstRowCells.length; i++) {
  console.log(firstRowCells[i].innerHTML);
}

三、动态操作 rows 集合的核心方法

3.1 添加新行（insertRow()）

通过 table.insertRow(index) 可在指定位置插入新行，默认添加到表格末尾。

案例场景：动态添加用户数据到表格中。

const newDataRow = table.insertRow(-1); // -1 表示末尾
const cell1 = newDataRow.insertCell(0);
cell1.innerHTML = "李四";
const cell2 = newDataRow.insertCell(1);
cell2.innerHTML = "30";

3.2 删除行（deleteRow() 或 removeChild()）

两种方式均可删除行：

  • table.deleteRow(index)：直接按索引删除。
  • row.parentNode.removeChild(row)：通过父元素移除。

示例：

// 删除第三行（索引 2）
table.deleteRow(2);

// 或者通过行对象删除
const targetRow = rows[3];
targetRow.parentNode.removeChild(targetRow);

3.3 遍历所有行（循环操作）

使用 for 或 forEach 遍历 rows 集合时，需注意将其转换为数组：

// 使用 Array.from() 转换为数组
Array.from(rows).forEach((row, index) => {
  console.log(`行 ${index} 的内容：`, row.cells[0].innerHTML);
});

四、实战案例：动态表格与交互功能

4.1 案例 1：动态增删行的表单

通过表单输入，用户可实时向表格添加或删除行。

HTML 结构：

<table id="dynamicTable">
  <tr>
    <th>任务</th>
    <th>状态</th>
  </tr>
</table>
<input type="text" id="taskInput">
<button onclick="addTask()">添加任务</button>
<button onclick="clearTasks()">清空表格</button>

JavaScript 实现：

function addTask() {
  const task = document.getElementById("taskInput").value;
  const table = document.getElementById("dynamicTable");
  const newRow = table.insertRow(-1);
  newRow.insertCell(0).innerHTML = task;
  newRow.insertCell(1).innerHTML = "待完成";
}

function clearTasks() {
  const table = document.getElementById("dynamicTable");
  // 删除所有行（保留表头）
  while (table.rows.length > 1) {
    table.deleteRow(1);
  }
}

4.2 案例 2：表格行的排序功能

通过点击表头对表格数据进行排序。

实现步骤：

  1. 绑定表头点击事件。
  2. 提取所有数据行并排序。
  3. 重新渲染表格。

代码片段：

document.querySelector("th").addEventListener("click", () => {
  const table = document.getElementById("sortTable");
  const rowsArray = Array.from(table.rows).slice(1); // 排除表头
  rowsArray.sort((a, b) => a.cells[1].innerHTML.localeCompare(b.cells[1]));
  // 清空并重新添加排序后的行
  while (table.rows.length > 1) {
    table.deleteRow(1);
  }
  rowsArray.forEach(row => table.appendChild(row));
});

五、进阶技巧与常见问题

5.1 跨浏览器兼容性

  • IE 浏览器：需注意 insertRow() 的参数支持（部分版本不支持负数索引）。
  • 单元格合并：若表格包含 rowspan 或 colspan，需额外处理单元格的索引逻辑。

5.2 性能优化建议

  • 批量操作：多次修改表格时，使用 documentFragment 缓存临时节点，减少重绘。
  • 避免频繁访问 rows.length：在循环中将 rows.length 存储为变量，避免重复计算。

结论：掌握 rows 集合的核心价值

通过本文的讲解，开发者可以系统掌握 HTML DOM Table rows 集合 的操作方法。从基础的获取、增删行，到动态交互和性能优化，这些技能能显著提升网页的交互性和数据展示能力。建议读者通过实际项目练习，例如构建可编辑的订单列表或实时更新的仪表盘，进一步巩固知识。记住，表格不仅是静态的数据容器，更是用户与数据交互的重要桥梁——而 rows 集合正是构建这座桥梁的关键工具。

最新发布

查看更多文章