表格转JSON判断复选框选中状态报Uncaught TypeError错误

问题原因 #

1. 索引不匹配导致访问不存在的元素
   你通过document.querySelectorAll(".myCheckbox")获取到的复选框列表总长度为5（对应5行数据），索引范围是0_{4。而`table.rows`包含表头行，总长度为6，循环变量`i`的取值范围是1}5，当i=5时访问ele[5]为undefined，读取type属性时就会抛出对应错误。
   同时即使不触发边界报错，索引也存在错位：ele[0]才对应第一行数据（table.rows[1]）的复选框，你当前的写法会用第二行复选框的状态判断第一行是否要保留，逻辑完全错误。
2. 次要问题
   你的表头只有Id、Price两列，但是数据行实际有三列（多了复选框列），生成的headers数组长度只有2，后续赋值行数据时会出现键值不匹配的问题。

修正方案 #

推荐直接在遍历每行数据时，从当前行内查找复选框，避免全局拿复选框导致的索引错位问题，修正后的代码如下：

const btn = document.getElementById("click");
let table = document.getElementById("myTable");
btn.addEventListener("click", function() {
  tableToJson(table);
})

function tableToJson(table) {
  let data = [];
  // 处理表头
  let headers = [];
  for (let i = 0; i < table.rows[0].cells.length; i++) {
    headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
  }

  // 遍历数据行
  for (let i = 1; i < table.rows.length; i++) {
    let tableRow = table.rows[i];
    // 从当前行内查找复选框，不会出现索引错位
    let currentCheckbox = tableRow.querySelector('.myCheckbox');
    if (currentCheckbox?.checked) {
      let rowData = {};
      // 只取前两列的Id和Price，跳过复选框列
      for (let j = 0; j < headers.length; j++) {
        rowData[headers[j]] = tableRow.cells[j].innerHTML;
      }
      data.push(rowData);
    }
  }
  console.log(data);
  return data;
}

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