HTML表格Total列值动态变更时自动计算该列总和的实现咨询

实现方案 #

你只需要新增一个求和函数，在所有会修改Total列数值的逻辑结束后调用该函数即可，具体修改如下：

第一步：修改HTML求和行

给总和展示单元格添加唯一ID，方便后续更新数值，将表格最后一行修改为：

<tr>
  <td></td>
  <td></td>
  <td>总和：<span id="totalSum">0</span></td>
</tr>

同时可以去掉普通行Total列的onkeyup="totalval(this)"属性，普通td不会触发键盘输入事件，该配置无效。

第二步：新增求和函数

在现有JS代码中添加如下函数：

function calculateTotalSum() {
  let sum = 0;
  // 获取所有行，排除最后一行的求和行
  const rows = document.querySelectorAll('table tr');
  for (let i = 0; i < rows.length - 1; i++) {
    // 取每行第4个单元格（索引从0开始，Total列索引为3）的数值
    const totalCell = rows[i].querySelector('td:nth-child(4)');
    const val = parseFloat(totalCell.innerText) || 0;
    sum += val;
  }
  // 更新总和展示
  document.getElementById('totalSum').innerText = sum;
}

第三步：在修改Total列的逻辑后调用求和函数

1. 在updatevalue函数最后，修改完td内容后添加调用：

function updatevalue(item, value, data) {
  var td = item.parentNode.nextElementSibling;
  var onupdate = 0;
  if (value) {
    onupdate = data * value;
  } else {
    onupdate = 0;
  }
  td.innerHTML = onupdate;
  // 新增调用求和
  calculateTotalSum();
}

（这里顺便简化了你原来的判断逻辑，value为空或者0的情况结果都是0，不需要重复判断）

2. 在remove_item函数最后，修改完Total列内容后添加调用：

function remove_item(item, prev) {
  item.parentNode.nextSibling.nextSibling.firstChild.disabled = true;
  item.parentNode.nextSibling.nextSibling.firstChild.value = '0';
  item.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML = '0';
  item.parentNode.style.display = "none";
  prev.style.display = "block";
  // 新增调用求和
  calculateTotalSum();
}

这样不管是输入数值更新Total列，还是点击Remove按钮重置Total列，都会自动触发总和重新计算。

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