jQuery表格时间列求和异常：点击按钮重复累加现有值求助

嘿，我完全懂你遇到的困扰——每次点击「添加按钮」后，总耗时不是重新计算所有已添加任务的总和，而是在之前的结果上不断叠加，对吧？这核心问题其实是你没有在每次计算总和前重置累加变量，导致旧的总和被保留并重复累加了。

下面给你一个清晰的解决思路和代码示例：

关键修复步骤 #

• 重置累加变量：每次计算总和前，把存储总和的变量（比如totalTime）重置为0，确保从0开始重新累加。
• 遍历所有行重新计算：不要只累加新添加的那一行数据，而是遍历表格中所有的耗时列单元格，把每一行的耗时都加起来。
• 更新总和显示：计算完成后，将新的总和更新到对应的展示位置。

代码示例 #

假设你之前的代码是类似这样（错误写法，导致重复累加）：

// 错误：全局变量保留了旧的总和，每次点击都叠加
let totalTime = 0;
function addTaskAndCalculate() {
  // 计算新行的耗时并添加到表格
  const newTime = getNewTaskTime();
  addRowToTable(newTime);
  
  // 直接叠加旧总和，导致重复累加
  totalTime += newTime;
  document.getElementById('total-time').textContent = totalTime;
}

改成正确的写法：

function addTaskAndCalculate() {
  // 1. 计算新行的耗时并添加到表格
  const newTime = getNewTaskTime();
  addRowToTable(newTime);
  
  // 2. 重新计算所有行的总和
  calculateTotalTime();
}

function calculateTotalTime() {
  // 重置总和为0
  let totalTime = 0;
  // 获取表格中所有耗时列的单元格
  const timeCells = document.querySelectorAll('#task-table .time-cell');
  
  // 遍历每个单元格累加耗时
  timeCells.forEach(cell => {
    const time = parseFloat(cell.textContent);
    // 确保是有效数字再累加，避免非数值干扰
    if (!isNaN(time)) {
      totalTime += time;
    }
  });
  
  // 3. 更新总和显示（可以保留两位小数让结果更规范）
  document.getElementById('total-time').textContent = totalTime.toFixed(2);
}

这样每次点击「添加按钮」后，都会从头遍历所有已添加的任务耗时，重新计算总和，彻底解决重复累加的问题。

内容的提问来源于stack exchange，提问作者Ganidu De Cyberholic