掌握HTML DOM，轻松遍历与修改表格数据

引言

HTML DOM（文档对象模型）是Web开发中一个非常重要的概念，它允许开发者通过JavaScript与HTML文档进行交互。在数据展示方面，表格是HTML中常用的元素之一。本文将详细介绍如何使用HTML DOM遍历和修改表格数据，帮助开发者提高开发效率。

HTML表格结构

在开始之前，我们先了解一下HTML表格的基本结构：

<table> <thead> <tr> <th>列名1</th> <th>列名2</th> <!-- 其他列名 --> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <!-- 其他数据 --> </tr> <!-- 其他行 --> </tbody> </table>

表格由<table>元素表示，<thead>元素包含表格的标题行，<tbody>元素包含表格的主体内容。

遍历表格

要遍历表格，我们可以使用getElementsByTagName或getElementsByClassName方法获取表格元素，然后使用children属性或querySelectorAll方法获取表格中的行和单元格。

遍历所有行

以下代码展示了如何遍历表格中的所有行：

// 获取表格元素 var table = document.getElementsByTagName('table')[0]; // 获取所有行 var rows = table.getElementsByTagName('tr'); // 遍历行 for (var i = 0; i < rows.length; i++) { // 获取行中的单元格 var cells = rows[i].getElementsByTagName('td'); // 遍历单元格 for (var j = 0; j < cells.length; j++) { console.log(cells[j].innerHTML); // 输出单元格内容 } }

遍历特定行

如果你只想遍历特定行，可以使用querySelectorAll方法：

// 遍历第2行 var row = table.querySelector('tr:nth-child(2)'); // 获取行中的单元格 var cells = row.getElementsByTagName('td'); // 遍历单元格 for (var i = 0; i < cells.length; i++) { console.log(cells[i].innerHTML); // 输出单元格内容 }

修改表格数据

在遍历表格的基础上，我们可以修改单元格的内容。以下代码展示了如何修改特定单元格的内容：

// 修改第2行第2个单元格的内容 var cell = table.querySelector('tr:nth-child(2) td:nth-child(2)'); cell.innerHTML = '新内容';

修改多行数据

如果你想修改多行数据，可以使用循环遍历每一行，然后修改单元格内容：

// 修改第2行到第4行第2个单元格的内容 for (var i = 2; i <= 4; i++) { var cell = table.querySelector('tr:nth-child(' + i + ') td:nth-child(2)'); cell.innerHTML = '新内容'; }