使用 jQuery 计算表格列的总和

如果你正在处理一个包含数值的 HTML 表格，计算表格某一列的总和是一个非常常见的需求。在本文中，我们将学习如何使用 JavaScript 库 jQuery 来计算表格列的总和。

步骤

以下是计算表格列总和的步骤：

1. 首先，在 HTML 中创建一个包含数值的表格。每行的第一个单元格应该是文本标签，而后续单元格可以包含任意其他元素。

<table>
   <thead>
      <tr>
         <th>Year</th>
         <th>Revenue</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>2018</td>
         <td>$2,500</td>
      </tr>
      <tr>
         <td>2019</td>
         <td>$3,200</td>
      </tr>
      <tr>
         <td>2020</td>
         <td>$4,500</td>
      </tr>
   </tbody>
</table>

2. 在 JavaScript 文件中，使用 jQuery 选择要计算总和的列。假设我们要计算列 Revenue 的总和，则选择该列的所有单元格。

var cells = $('td:nth-child(2)');

在上面的代码中，nth-child 选择器将匹配每个行的第二个子元素（即第二列）。

3. 循环遍历该列中的所有单元格，将每个单元格的文本值转换为数字，并加到总和中。

var sum = 0;

cells.each(function() {
   var cellText = $(this).text().replace('$', '').replace(',', '');
   sum += parseInt(cellText);
});

4. 最后，将总和输出到控制台或任何其他您需要的地方

console.log(sum);

完整代码

以下是计算表格列总和的完整代码片段：

var cells = $('td:nth-child(2)');
var sum = 0;

cells.each(function() {
   var cellText = $(this).text().replace('$', '').replace(',', '');
   sum += parseInt(cellText);
});

console.log(sum);

这段代码假设我们的表格包含两列，第二列包含金额，金额以 $ 和 , 作为千位分隔符。如果您的表格结构稍有不同，您可能需要适当地调整选择器和解析器。