使用 js 或 jQuery 计算 td 类的总和

Question

我有一个下拉选择菜单，其中包含代表计算机数量的各种选项（即 5、10、15、20...）。默认选择菜单值为 5。我正在使用一些 js 将下拉选择乘以一个数量（即 10）并使用 .price-1 类填充表 td。因此，例如，如果用户离开默认选择 5，则 .price-1 的计算值为 50。

这工作正常。

但是，然后我需要将 .price-1 与其他几个 <td> 类（即 .price-2、.price-3、.price-4...）相加，以得到 $ 值的总计#result 中显示。

如何使用 js 或 jQuery 对这些 td 类进行求和以获得总计？

下面是我需要汇总的表格的 html。

<table id="tableOrderTotal" class="table tableTotal"> 
 <tbody> 
  <tr> 
   <td>Item1</td> 
   <td class="price-1">calculated amount populated here</td> 
  </tr> 
  <tr> 
   <td>Item2</td> 
   <td class="price-2">calculated amount populated here</td> 
  </tr> 
  <tr> 
   <td>Item3</td> 
   <td class="price-3">13</td> 
  </tr>
  <tr> 
   <td>Item3</td> 
   <td class="price-4">30</td> 
  </tr> 
  <tr class="summary"> 
   <td class="totalOrder">Total:</td> 
   <td id="result" class="totalAmount"> </td> 
  </tr> 
 </tbody> 
</table>

Answer 1

使用attribute value contains selector 或tr 的第二个td 元素使用:nth-child() 获取所有td 元素。现在使用each() 方法对它们进行迭代，并使用里面的文本得到总和。

var sum = 0;

$('td[class*="price-"]').each(function() {
  sum += Number($(this).text()) || 0;
});

$('#result').text(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
  <tbody>
    <tr>
      <td>Item1</td>
      <td class="price-1">calculated amount populated here</td>
    </tr>
    <tr>
      <td>Item2</td>
      <td class="price-2">calculated amount populated here</td>
    </tr>
    <tr>
      <td>Item3</td>
      <td class="price-3">13</td>
    </tr>
    <tr>
      <td>Item3</td>
      <td class="price-4">30</td>
    </tr>
    <tr class="summary">
      <td class="totalOrder">Total:</td>
      <td id="result" class="totalAmount"></td>
    </tr>
  </tbody>
</table>

---

@rayon 建议使用Array#reduce 方法。

$('#result').text([].reduce.call($('td[class*="price-"]'), function(sum, ele) {
  return sum + (Number($(ele).text()) || 0);
}, 0));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
  <tbody>
    <tr>
      <td>Item1</td>
      <td class="price-1">calculated amount populated here</td>
    </tr>
    <tr>
      <td>Item2</td>
      <td class="price-2">calculated amount populated here</td>
    </tr>
    <tr>
      <td>Item3</td>
      <td class="price-3">13</td>
    </tr>
    <tr>
      <td>Item3</td>
      <td class="price-4">30</td>
    </tr>
    <tr class="summary">
      <td class="totalOrder">Total:</td>
      <td id="result" class="totalAmount"></td>
    </tr>
  </tbody>
</table>