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或使用:nth-child() td的第二个td元素获取所有tr个元素。现在使用each()方法迭代它们，并使用里面的文本得到总和。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

jQuery Object有一个直接属性，指的是匹配元素的数量。

var sum = $('td[class*="price-"]').length;
$('#result').text(sum);

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

2 个答案: