如何在JavaScript中对表格行数据进行求和计算？

水果数量表 #

很简单，我们可以分两种场景来实现：一种是基于纯数据的计算，另一种是直接操作页面上的HTML表格。我给你分别写例子：

1. 基于纯数据的求和（适合数据已存在代码中） #

首先把表格数据用结构化的数组对象存储，这样计算起来很灵活：

// 定义原始水果数据
const fruitData = [
  { name: 'Apple', john: 5, alexa: 3 },
  { name: 'Grape', john: 15, alexa: 10 }
];

计算每个人的总水果数（对应Total Fruits行的John/Alexa列） #

遍历数据累加对应数值即可：

function getPersonTotals(data) {
  let johnTotal = 0;
  let alexaTotal = 0;
  
  data.forEach(item => {
    johnTotal += item.john;
    alexaTotal += item.alexa;
  });
  
  return { john: johnTotal, alexa: alexaTotal };
}

const personTotals = getPersonTotals(fruitData);
console.log('John总水果数:', personTotals.john); // 输出20
console.log('Alexa总水果数:', personTotals.alexa); // 输出13

计算每种水果的总数（对应每行的Total列） #

用map给每个水果对象追加总数属性：

const fruitDataWithTotal = fruitData.map(item => ({
  ...item,
  total: item.john + item.alexa
}));

console.log(fruitDataWithTotal);
// 输出：
// [
//   { name: 'Apple', john: 5, alexa: 3, total: 8 },
//   { name: 'Grape', john: 15, alexa: 10, total: 25 }
// ]

计算所有水果的总计（对应Total Fruits行的Total列） #

把两个人的总数相加即可：

const grandTotal = personTotals.john + personTotals.alexa;
console.log('所有水果总计:', grandTotal); // 输出33

2. 直接操作HTML表格（适合页面上已存在的表格） #

假设你的页面表格结构如下：

<table id="fruitTable">
  <thead>
    <tr>
      <th>Fruits</th>
      <th>John</th>
      <th>Alexa</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>5</td>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>15</td>
      <td>10</td>
      <td></td>
    </tr>
    <tr>
      <td>Total Fruits</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

我们可以通过DOM操作自动计算并填充求和值：

const table = document.getElementById('fruitTable');
const rows = table.querySelectorAll('tbody tr');
let johnTotal = 0;
let alexaTotal = 0;

// 遍历数据行（跳过最后一行总计行）
for (let i = 0; i < rows.length - 1; i++) {
  const cells = rows[i].querySelectorAll('td');
  // 提取John和Alexa的水果数量并累加
  const johnNum = parseInt(cells[1].textContent);
  const alexaNum = parseInt(cells[2].textContent);
  johnTotal += johnNum;
  alexaTotal += alexaNum;
  
  // 填充当前水果的总数
  cells[3].textContent = johnNum + alexaNum;
}

// 填充总计行的数值
const totalRow = rows[rows.length - 1];
totalRow.querySelectorAll('td')[1].textContent = johnTotal;
totalRow.querySelectorAll('td')[2].textContent = alexaTotal;
totalRow.querySelectorAll('td')[3].textContent = johnTotal + alexaTotal;

如果你的表格结构有调整，只要修改代码中对应单元格的索引位置就行，很灵活的。

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