JS中处理表格行数据需先将HTMLCollection转为真数组，再用forEach、map、filter等方法操作；常用转换方式有[...table.rows]和Array.from(table.rows)。
JS 中用数组遍历方法处理表格行数据，核心是把 HTMLCollection（如 table.rows）转成真数组，再用 forEach、map、filter 等方法操作。
先转成数组才能用数组方法
table.rows 返回的是类数组对象（HTMLCollection），它没有 forEach、map 等方法。必须先转换：
- 用扩展运算符：
[...table.rows] - 用
Array.from()：Array.from(table.rows) - 旧写法（不推荐）：
Array.prototype.slice.call(table.rows)
遍历并读取每行单元格内容
常见需求：提取所有行的第 2 列文本，或给每行加背景色：
const table = document.getElementById('myTable');
[...table.rows].forEach(row => {
const cellText = row.cells[1]?.textContent?.trim(); // 安全取第2列（索引1）
console.log(cellText);
row.style.backgroundColor = 'lightyellow';
});
用 map 提取结构化数据
把表格行批量转成对象数组，适合后续计算或渲染：
const data = [...table.rows].map(row => ({
id: row.cells[0]?.textContent,
name: row.cells[1]?.textContent,
status: row.cells[2]?.textContent
}));
注意：加可选链 ?. 防止某行单元格数量不足报错。
用 filter + forEach 筛选并操作特定行
比如只处理“状态”列为 “active” 的行：
[...table.rows]
.filter(row => row.cells[2]?.textContent?.trim() === 'active')
.forEach(row => row.classList.add('highlight'));
也可以链式组合：筛选 → 映射 → 求和，比如统计某列数值总和：
const sum = [...table.rows] .map(row => parseFloat(row.cells[3]?.textContent) || 0) .reduce((a, b) => a + b, 0);
不复杂但容易忽略转换步骤，记牢 [...rows] 或 Array.from(rows) 是关键起点。
