如何使用JavaScript对HTML表格中金额列的数值进行求和？

1. 新增总金额计算函数 #

在你现有JS代码的末尾添加以下代码：

// 计算金额列总和
function calculateTotal() {
  let sum = 0;
  // 获取表格tbody内所有行
  const tableRows = document.querySelectorAll("#displayTable tbody tr");
  tableRows.forEach(row => {
    // 提取第三列（金额列，列索引从0开始计数为2）的内容
    const amountText = row.cells[2].innerText.trim();
    // 转成数值后累加，容错处理避免非数字内容导致计算异常
    sum += parseFloat(amountText) || 0;
  })
  // 将计算结果赋值到总金额展示输入框
  document.getElementById("total").value = sum;
}

2. 新增行完成后触发求和计算 #

找到你现有tableDisplay函数的末尾，在row++;这行代码的上方，添加调用求和函数的代码：

// 你原有代码的末尾部分
  cell4.innerHTML = remarks
  
  selectedRow()
  // 新增调用求和函数的代码
  calculateTotal();

  row++;
}

额外优化建议 #

你现有代码中以下冗余代码可以直接删除，因为你已经将输入框的value赋值给了name/amount等变量，这些变量是字符串类型，不存在value属性：

name.value = " ";
amount.value = " ";
date.value = " ";
remarks.value = " ";

拓展说明 #

如果后续你实现了删除选中行的功能，只需要在删除行的操作完成后，同样调用一次calculateTotal()，就能自动更新总金额数值。

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