JavaScript表格数据遍历方法

本文深入解析了JavaScript遍历HTML表格数据的五种实用技巧——从基础的for循环逐行逐列提取，到forEach结合CSS选择器的灵活定位，再到语义清晰的for...of迭代、应对嵌套表格的递归方案，以及函数式风格的Array.from链式处理；每种方法均兼顾兼容性、可读性与适用场景，帮助开发者高效、准确地提取并处理表格中的所有单元格内容，无论面对简单结构还是复杂嵌套，都能找到最优解。

如果您需要从HTML表格中提取所有单元格数据并进行处理，则必须通过JavaScript遍历表格的行与列结构。以下是实现该目标的具体方法：

一、使用for循环遍历table元素的rows和cells

此方法直接访问DOM中table元素的rows集合与每行的cells集合，适用于结构清晰、无复杂嵌套的表格。它不依赖外部库，执行效率高，且兼容所有现代浏览器。

1、通过document.getElementById获取目标table元素。

2、使用table.rows.length获取表格总行数。

3、外层for循环遍历每一行，索引为i，条件为i

4、内层for循环遍历当前行的cells，索引为j，条件为j

5、在内层循环中，使用table.rows[i].cells[j].textContent获取单元格文本内容。

6、将提取的内容存入数组或执行其他逻辑处理。

二、使用forEach结合querySelectorAll选取所有td和th元素

此方法利用CSS选择器一次性定位全部数据单元格，忽略表格结构层级，适合需统一处理所有可显示内容的场景，尤其适用于含多组tbody或存在合并单元格但无需区分行列关系的情况。

1、调用document.querySelectorAll('table tbody td, table tbody th, table thead th, table tfoot td, table tfoot th')获取全部单元格节点列表。

2、对返回的NodeList调用forEach方法，参数为单个cell节点。

3、在回调函数中，读取cell.textContent并去除首尾空白字符。

4、使用trim()确保空格不干扰后续判断。

5、跳过内容为空字符串的单元格，避免无效数据进入结果集。

三、使用for...of循环配合rows属性与cells属性迭代

此方法语法更简洁，语义更明确，避免传统for循环中的索引管理错误，同时保持对表格原始结构的完整映射，便于保留行列上下文信息。

1、通过document.querySelector('table')获取首个table元素。

2、使用for...of遍历table.rows，每次迭代得到一个HTMLTableRowElement对象row。

3、对每个row，再次使用for...of遍历row.cells，每次得到一个HTMLTableCellElement对象cell。

4、检查cell.tagName是否为'TD'或'TH'，过滤掉非标准单元格节点。

5、使用cell.innerText获取渲染后可见文本，自动忽略script、style等不可见内容。

四、递归遍历包含嵌套表格的复杂结构

当表格内部存在子table（如单元格内嵌另一个表格），需逐层深入提取所有层级的文本数据，此时线性遍历失效，必须采用递归策略展开嵌套节点树。

1、定义名为extractTextFromNode的函数，接收一个DOM节点作为参数。

2、初始化空数组results用于收集文本。

3、若节点为元素节点且tagName为'TABLE'，则遍历其rows和cells，并对每个子节点递归调用extractTextFromNode。

4、若节点为元素节点且tagName为'TD'或'TH'，则将node.textContent推入results。

5、若节点为文本节点且textContent去空格后非空，则将其加入results。

6、返回results数组并展平所有嵌套子数组。

五、使用Array.from转换rows和cells为数组后链式调用map与flat

此方法借助ES6数组方法实现函数式风格的数据提取，代码紧凑，易于组合过滤与转换逻辑，适合需要对提取结果立即做去重、格式化或条件筛选的场景。

1、用Array.from(table.rows)将HTMLCollection转为标准数组。

2、对行数组调用map方法，每个row再用Array.from(row.cells)转为其单元格数组。

3、对单元格数组再次调用map，提取cell.textContent.trim()。

4、在外层map返回的二维数组上调用flat()，展平为一维字符串数组。

5、在最终数组上链式调用filter(Boolean)，移除所有falsy值（如空字符串、null、undefined）。

到这里，我们也就讲完了《JavaScript表格数据遍历方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！