在Web开发中，我们经常需要把页面里已有的HTML表格转换成数组或对象，以便做搜索、排序或者导出。原生JavaScript提供了丰富的DOM接口，不需要任何第三方库就能完成这件事。理解表格的DOM结构以及不同循环写法的差异，是写出稳定提取逻辑的基础。
一、HTML表格的基本DOM结构
一个标准的HTML表格通常由<table>、<thead>、<tbody>、<tr>和<td>或<th>组成。浏览器解析后，这些标签会变成对应的DOM节点，我们可以通过父节点和子节点关系访问它们。很多人误以为表格数据只能从<table>开始一层层递归，其实利用选择器接口能直接定位到行和单元格。
需要注意的是，如果表格中使用了rowspan或colspan合并单元格，真实的列数会和视觉展示不一致。在提取数据前，最好先确认表头数量，或者把合并单元格按规则展开，否则会出现数组错位。下面的例子假设表格没有复杂合并，重点演示遍历思路。
二、使用for循环逐行提取
最传统也最容易控制的方式是使用for循环配合rows集合。通过document.querySelectorAll拿到所有<tr>，然后对每个<tr>再用querySelectorAll拿<td>。这种方式逻辑清晰，方便在循环里加条件判断，比如跳过空行。
下面的代码演示了如何把一个简单表格转成二维数组。我们用textContent而不是innerHTML来获取内容，这样能避免把内部标签也带出来，保证数据干净。
// 假设页面有一个id为demo的表格
var table = document.getElementById('demo');
var rows = table.querySelectorAll('tr');
var data = [];
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].querySelectorAll('td, th');
var rowData = [];
for (var j = 0; j < cells.length; j++) {
// 使用textContent提取纯文本
rowData.push(cells[j].textContent.trim());
}
data.push(rowData);
}
console.log(data);
这种写法的优点是兼容性好，即使在较老的浏览器里也能运行。缺点是比较冗长，当我们需要对每一列做不同处理时，嵌套循环会让代码变深。但它依然是理解DOM遍历最合适的入门方式。
三、使用forEach与现代语法
ES5之后，NodeList在很多浏览器里支持forEach方法，我们可以把上面的逻辑写得更简洁。结合Array.from还能把类数组对象变成真正的数组，从而使用map等高阶函数。这样代码可读性更高，也更容易做链式处理。
下面示例把表格每一行映射成一个对象，以表头文字作为键名。这种做法在导出JSON时非常实用，比纯二维数组更直观。
var table = document.querySelector('table');
var trList = Array.from(table.querySelectorAll('tr'));
// 取第一行作为表头
var headers = Array.from(trList[0].querySelectorAll('th')).map(function(th) {
return th.textContent.trim();
});
var result = trList.slice(1).map(function(tr) {
var cells = Array.from(tr.querySelectorAll('td'));
var obj = {};
cells.forEach(function(td, index) {
obj[headers[index]] = td.textContent.trim();
});
return obj;
});
console.log(result);
使用map和forEach可以减少临时变量，逻辑集中在少数几个函数里。但要注意，如果表格很大，链式调用会创建多个中间数组，内存占用比传统for循环略高。在普通业务表格场景下，这点开销可以忽略。
四、处理合并单元格与异常结构
真实项目里的表格常常没那么规范。比如某些列用了colspan，导致一行里的<td>数量少于表头。如果直接按索引对应，对象属性会错乱。一个简单的应对策略是：先扫描表头得到标准列数，遍历行时若单元格不足，用空字符串补全。
此外，有的表格会把数据放在<tbody>之外，或者用嵌套表格。此时用table.querySelectorAll('tr')可能会抓到子表格的行。更严谨的做法是只选直接子级，例如table.tBodies[0].rows，它只会返回主体部分的行，避免干扰。
var tbody = document.querySelector('table').tBodies[0];
var rows = tbody.rows;
var safeData = [];
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].cells;
var rowArr = [];
for (var j = 0; j < cells.length; j++) {
rowArr.push(cells[j].textContent.trim());
}
// 若列数不足，补空串
while (rowArr.length < 5) {
rowArr.push('');
}
safeData.push(rowArr);
}
通过tBodies和cells集合，我们可以少写选择器，也能规避嵌套表格问题。补空串的逻辑虽简单，却能让后续的数据处理不因索引越界而报错。对于报表类页面，这种防御性写法很值得加入。
五、性能与适用场景对比
当表格行数在几百以内时，上述任意方式性能差异都不明显。但如果页面要定时抓取上千行表格，频繁调用querySelectorAll会有一定开销。此时推荐缓存行集合，并在循环内尽量用cells这类原生集合，减少重复查询。
下表列出了三种常见写法的特点，方便你按项目情况选择：
| 写法 | 兼容性 | 代码复杂度 | 适用场景 |
|---|---|---|---|
| for循环+rows | 极佳 | 中等 | 老系统、大表格 |
| forEach+Array.from | 现代浏览器 | 低 | 快速开发、JSON导出 |
| tBodies+cells | 良好 | 低 | 结构规范的报表 |
综合来看，原生JavaScript遍历HTML表格并不复杂，核心是选对DOM入口、用textContent拿纯文本、对异常结构做兜底。掌握这些技巧后，前端筛选、导出Excel、接口模拟等需求都能更轻松地实现。
JavaScriptHTML_tabledata_extraction修改时间：2026-08-07 23:12:35