计算HTML表格Amount列总和并展示在表尾的功能实现问题

现有代码核心错误点 #

• 你获取的是所有td元素的集合，td本身没有cells属性，cells是表格行tr的属性，属于层级取值错误
• Amount列的内容前缀带Rs.字符串，直接传入parseInt会返回NaN，无法正确累加
• 直接修改table的innerHTML追加行不符合表格结构规范，应该将总计行追加到tbody内，同时注意单元格数量要和表头对应，避免布局错位
• 你已经给Amount列的td加了count-me类，直接通过类名筛选目标列，代码更简洁也不容易出错

修正后的JS代码 #

var sum = 0;
// 直接筛选所有Amount列的单元格
var amountCells = document.querySelectorAll('#PayvouchDt tbody td.count-me');
amountCells.forEach(function(cell) {
  // 先移除Rs.前缀再转数字，遇到非数字内容默认按0处理避免计算异常
  var num = parseFloat(cell.innerText.replace('Rs.', '').trim()) || 0;
  sum += num;
});
// 构造总计行，前三列合并展示标题，最后一列展示总和，和表头布局对齐
var totalRow = document.createElement('tr');
totalRow.innerHTML = `<td colspan="3" style="text-align:right;font-weight:bold;">Total Value</td><td style="font-weight:bold;">Rs.${sum.toFixed(2)}</td>`;
// 将总计行追加到表格tbody末尾
document.querySelector('#PayvouchDt tbody').appendChild(totalRow);

如果你的Amount列是整数类型，把parseFloat替换为parseInt、去掉toFixed(2)即可，原有HTML代码不需要修改，保留count-me类就可以正常运行。

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