如何使用Javascript将HTML表格单元格内容转换为数组

问题排查 #

你写的代码存在两个核心问题：

1. 只做了DOM节点到数组的类型转换，没有按行分组、筛选数字列、提取内容转数值的逻辑，不可能直接得到你要的目标数组格式。
2. 如果拿到空数组，是因为代码执行时表格DOM还没渲染：如果你的JS放在<head>里，或者页面还没加载完就执行了代码，querySelectorAll('td') 匹配不到任何元素，自然得到空数组。

实现代码 #

你可以直接用以下代码实现需求：

// 等DOM全部加载完成后再执行逻辑，避免选不到节点
document.addEventListener('DOMContentLoaded', function() {
  // 选中表格的所有数据行
  const rows = document.querySelectorAll('.table tbody tr');

  rows.forEach(function(row) {
    // 取行的id作为数组名的后缀
    const weekNo = row.id;
    // 筛选当前行里class为number的单元格，提取内容转成数字
    const numList = Array.from(row.querySelectorAll('.number'))
                        .map(td => parseInt(td.textContent.trim(), 10));
    // 挂载为全局变量，符合你要的 numXX 命名格式
    window[`num${weekNo}`] = numList;
  });

  // 测试输出
  console.log(num45); // [4, 44, 46, 30, 43]
  console.log(num44); // [13, 25, 6, 49, 31]
});

如果不想污染全局作用域，也可以把所有数组存在一个对象里：

document.addEventListener('DOMContentLoaded', function() {
  const result = {};
  const rows = document.querySelectorAll('.table tbody tr');

  rows.forEach(function(row) {
    const weekNo = row.id;
    const numList = Array.from(row.querySelectorAll('.number'))
                        .map(td => parseInt(td.textContent.trim(), 10));
    result[`num${weekNo}`] = numList;
  });

  console.log(result.num45); // 同样可以拿到对应数组
});

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