必须通过JavaScript遍历表格的行与列结构来提取HTML表格所有单元格数据;具体方法是用for循环访问table.rows和每行.cells,先用document.getElementById获取table,再依rows.length遍历行,逐行读取cells数据。

如果您需要从HTML表格中提取所有单元格数据并进行处理,则必须通过JavaScript遍历表格的行与列结构。以下是实现该目标的具体方法:
一、使用for循环遍历table元素的rows和cells
此方法直接访问DOM中table元素的rows集合与每行的cells集合,适用于结构清晰、无复杂嵌套的表格。它不依赖外部库,执行效率高,且兼容所有现代浏览器。
1、通过document.getElementById获取目标table元素。
2、使用table.rows.length获取表格总行数。
立即学习“Java免费学习笔记(深入)”;
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)。











