表格余额排序报错：TypeError: 无法读取undefined的textContent属性

错误原因分析 #

你遇到的Cannot read properties of undefined (reading 'textContent')报错，本质是两个问题导致：

• 你先遍历所有行（包括表头、尾部可能的汇总行）再用slice(1, -1)过滤，遍历过程中拿到了没有第4列（cells[3]）的行，比如表头行结构不同，直接访问cells[3]会返回undefined。
• 部分数据行的余额列是空单元格，或者单元格本身不存在，同样会导致cells[3]为undefined。

修复方案 #

调整处理顺序，先过滤掉不需要的行，再处理每行的余额数据，同时增加空值/不存在的判断：

const sortBtnBalance = document.querySelector(".sort-balance-btn");
sortBtnBalance.addEventListener("click", sortTableByBalance);

function sortTableByBalance() {
  const table = document.getElementById("myTable");
  // 先把表格行转成数组，直接过滤掉表头（index=0）和最后一行
  const dataRows = Array.from(table.rows).slice(1, -1);
  
  // 遍历过滤后的有效数据行，处理余额列
  const arrs = dataRows.map(row => {
    // 先检查第4列是否存在，不存在或内容为空则用0代替
    const balanceCell = row.cells[3];
    const balance = balanceCell ? +balanceCell.textContent.trim() || 0 : 0;
    return [row, balance];
  });

  // 这里可以继续写排序逻辑，比如：
  // arrs.sort((a, b) => a[1] - b[1]);
  // 然后重新插入行到表格中...
}

关键改动说明 #

• 先过滤再遍历：把Array.from(table.rows).slice(1, -1)提前，确保只处理有效数据行，避免表头/无效行干扰。
• 空值兜底处理：通过balanceCell ? ... : 0判断单元格是否存在，再用trim()去掉空格，空内容转成0，防止转数字时出现NaN。

如果你的表格尾部没有需要排除的行，把slice(1, -1)改成slice(1)即可（只去掉表头行）。

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