JS如何映射HTML表格指定列并提取数据存入数组

错误复现 #

执行以下代码时控制台抛出ReferenceError: c is not defined错误，目标是提取id为dtable的表格中指定列的数据：

function updateAllTasks() {
var table = document.getElementById("dtable");

var [, ...tr] = table.querySelectorAll("tr");
var tableData = [...tr].map(r => {
var td = r.querySelectorAll("td");
    console.log([...td].map(c => c[0].innerHTML, c[1].innerHTML, c[8].querySelectorAll('input[name="rowcheckbox"]')[0].value)); // 报错行
})
console.log(JSON.stringify(tableData));
}

错误原因 #

报错行存在两处语法和逻辑错误：

• 箭头函数写法错误：箭头函数参数列表后如果要执行多段逻辑、返回多个值，必须用大括号包裹函数体，或把返回值组装为数组/对象。当前写法中逗号后的c[1].innerHTML、c[8]...部分被JS识别为map方法的传入参数，该作用域内没有定义变量c，直接触发引用错误。
• 取值逻辑错误：[...td].map(c => {})遍历中，c是单个td单元格DOM对象，不是类数组/数组，不存在c[0]、c[1]这类索引取值方式。要取指定列的内容，直接通过td集合的索引访问对应位置元素即可，不需要遍历所有td做map。

修复后代码 #

function updateAllTasks() {
  const table = document.getElementById("dtable");
  // 跳过表头行，获取所有数据行
  const [, ...trList] = table.querySelectorAll("tr");
  const tableData = trList.map(row => {
    const tdList = row.querySelectorAll("td");
    // 按索引提取需要的列值：第1列、第2列、第9列内复选框的值
    const firstCol = tdList[0].innerHTML.trim();
    const secondCol = tdList[1].innerHTML.trim();
    const checkboxVal = tdList[8].querySelector('input[name="rowcheckbox"]').value;
    console.log(firstCol, secondCol, checkboxVal);
    // 返回当前行提取结果，存入结果数组
    return [firstCol, secondCol, checkboxVal];
  })
  console.log(JSON.stringify(tableData));
  return tableData;
}

注意事项 #

• 当明确页面中只有一个匹配的目标元素时，优先用querySelector获取，不需要调用querySelectorAll后再取索引0，简化写法的同时性能更好。
• 提取innerHTML内容时可以调用trim()去除首尾多余的空白、换行字符，避免无效字符影响后续数据处理。
• 数组map方法的标准传参为map(回调函数, 回调内this指向)，回调函数仅接收当前遍历元素、索引、原数组三个参数，不要在回调定义位置额外写逗号分隔的表达式。

内容的提问来源于stack exchange，提问作者onit