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

Question

I have a dropdown select menu with various options (ie 5, 10, 15, 20...) that represents # of computers. The default select menu value is 5. I am using some js to multiply the dropdown selection by an amount (ie 10) and populates a table td with a class of .price-1. So, for example if the user leaves the default selection of 5, the calculated value of .price-1 is 50.

This is working fine.

However, I then need to sum .price-1 with a few other <td> classes (ie .price-2, .price-3, .price-4...) to get a grand total in $ values that shows in #result.

How can I use js or jQuery to sum these td classes to get the grand total?

Below is my html of my table I need to sum.

<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

Get all td elements either using attribute value contains selector or by second td element of tr using :nth-child() . Now iterate over them using each() method and get sum using the text inside.

 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> 

---

With Array#reduce method as @rayon suggested.

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

Answer 2

jQuery Object has a direct attribute referring to the number of the matched elements.

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