如何使用JavaScript计算HTML表格指定列的数值总和

完整实现代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有带expense类的td单元格
  const expenseList = document.querySelectorAll('td.expense')
  let totalAmount = 0

  expenseList.forEach(item => {
    // 转换为数字，过滤非数字内容
    const expenseVal = parseFloat(item.textContent.trim())
    if (!isNaN(expenseVal)) {
      totalAmount += expenseVal
    }
  })

  // 结果保留两位小数后填充到目标容器
  document.getElementById('total-expenses').textContent = totalAmount.toFixed(2)
})

逻辑说明 #

• 定位目标单元格直接用类选择器td.expense即可，不需要按列索引定位，不受表格列顺序调整的影响，稳定性更高。
• 求和过程中加入了非数字判断，避免单元格出现异常内容导致求和结果错误。
• 最终结果默认保留两位小数，符合金额类数据的展示需求，如果不需要小数格式，直接删除.toFixed(2)即可。

注意事项 #

• 如果你将JS代码放在页面<body>标签的末尾，可以省略外层的DOMContentLoaded事件监听，直接写内部逻辑即可，此时DOM已经渲染完成，不会出现找不到元素的问题。
• 如果后续表格有动态新增的支出数据，只需要在数据更新后重新执行一遍求和逻辑，就能得到最新的总金额。

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