JavaScript中用双重for循环遍历二维表格数据,外层控行、内层控列;需确保数据为数组的数组结构,如[["姓名","年龄"],["张三",28]],否则须先转换。

JavaScript 中用双重循环遍历二维表格数据,核心是外层循环控制行(rows),内层循环控制列(cols)。只要数据结构是数组的数组(如 [[row1], [row2], ...]),就能逐行逐单元格访问。
确认数据结构是否为标准二维数组
表格数据通常来自 HTML 表格(table)、CSV 解析结果或后端返回的 JSON。确保它是类似这样的结构:
const tableData = [ ["姓名", "年龄", "城市"], ["张三", 28, "北京"], ["李四", 32, "上海"] ];
如果不是,需先转换:比如从 DOM 获取表格内容,可用 Array.from(table.rows) + Array.from(row.cells) 构建二维数组。
用 for 循环实现清晰可控的遍历
for 循环最直观,便于调试和添加条件逻辑:
立即学习“Java免费学习笔记(深入)”;
- 外层
for (let i = 0; i 遍历每一行 - 内层
for (let j = 0; j 遍历该行每个单元格 - 用
tableData[i][j]访问具体值,例如console.log(`第${i}行第${j}列:${tableData[i][j]}`)
用 for...of 简化语法(适合只读场景)
更简洁、语义明确,但不直接提供索引:
-
for (const row of tableData)—— 每次拿到一整行数组 -
for (const cell of row)—— 再遍历该行每个单元格 - 若需行列号,可配合
entries():for (const [i, row] of tableData.entries())和for (const [j, cell] of row.entries())
遍历中常见处理需求
实际使用常伴随操作,比如筛选、累加或生成 HTML:
- 跳过表头:从
i = 1开始外层循环 - 只处理数值列:内层检查
typeof cell === 'number'或!isNaN(cell) - 拼接 HTML 字符串:
html += `<tr><td>${cell}</td></tr>`(注意 XSS,展示用户数据前要转义) - 统计某列总和:定义变量
sum = 0,在内层满足条件时执行sum += Number(cell)


















