js表格实现累加

实现表格累加的方法

在JavaScript中实现表格累加功能，可以通过遍历表格行或列，将数值相加并显示在指定位置。以下是几种常见实现方式：

逐行累加并显示在末尾列

假设需要将表格每行的前几列数值累加，结果显示在最后一列：

function sumRows(tableId) {
  const table = document.getElementById(tableId);
  const rows = table.getElementsByTagName('tr');

  for (let i = 0; i < rows.length; i++) {
    const cells = rows[i].getElementsByTagName('td');
    let sum = 0;

    // 假设前3列是数字（跳过表头和最后一列）
    for (let j = 1; j < cells.length - 1; j++) {
      const value = parseFloat(cells[j].textContent);
      if (!isNaN(value)) sum += value;
    }

    // 将结果写入最后一列
    cells[cells.length - 1].textContent = sum;
  }
}

逐列累加并显示在末尾行

若需要统计每列的总和并显示在最后一行：

function sumColumns(tableId) {
  const table = document.getElementById(tableId);
  const rows = table.getElementsByTagName('tr');
  const colCount = rows[0].getElementsByTagName('td').length;
  const sums = new Array(colCount).fill(0);

  // 跳过表头（如有）
  for (let i = 1; i < rows.length; i++) {
    const cells = rows[i].getElementsByTagName('td');
    for (let j = 0; j < cells.length; j++) {
      const value = parseFloat(cells[j].textContent);
      if (!isNaN(value)) sums[j] += value;
    }
  }

  // 添加合计行
  const footer = table.createTFoot();
  const row = footer.insertRow();
  for (let j = 0; j < sums.length; j++) {
    const cell = row.insertCell(j);
    cell.textContent = j === 0 ? '合计' : sums[j];
  }
}

动态表格的实时累加

对于允许用户编辑的表格，可通过事件监听实现实时累加：

document.getElementById('editableTable').addEventListener('input', function(e) {
  if (e.target.tagName === 'TD') {
    const row = e.target.parentNode;
    const cells = row.getElementsByTagName('td');
    let sum = 0;

    for (let i = 1; i < cells.length - 1; i++) {
      const value = parseFloat(cells[i].textContent);
      if (!isNaN(value)) sum += value;
    }

    cells[cells.length - 1].textContent = sum;
  }
});

使用reduce简化代码

对于现代浏览器环境，可用数组方法简化逻辑：

function sumRow(row) {
  return [...row.cells]
    .slice(1, -1)
    .reduce((acc, cell) => acc + (parseFloat(cell.textContent) || 0), 0);
}

注意事项

• 确保表格数据为纯数字，非数字内容需用parseFloat()或parseInt()处理
• 处理表头/表尾时需注意跳过非数据行
• 动态生成的表格需在DOM加载完成后执行累加操作
• 大量数据时考虑性能优化，避免频繁DOM操作

以上方法可根据实际表格结构和需求调整，核心逻辑均为遍历单元格数值并累加。