javascript - 使用 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 获取所有 td 元素或 tr 的第二个 td 元素使用 :nth-child() .现在使用 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>

---

与 Array#reduce @rayon 建议的方法。

$('#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>