Berechnung der Summe der TD-Klassen mit js oder jQuery

Question

Ich habe ein Dropdown-Auswahlmenü mit verschiedenen Optionen (d. H. 5, 10, 15, 20 ...), die Anzahl der Computer darstellt. Der Standardauswahlmenüwert ist 5. Ich verwende einige js, um die Dropdown-Auswahl mit einem Betrag (d. H. 10) zu multiplizieren, und füllt eine Tabelle td mit einer Klasse von .price-1. Wenn beispielsweise der Benutzer die Standardauswahl von 5 belässt, ist der berechnete Wert von .price-1 50.

Dies funktioniert einwandfrei.

Allerdings muss ich dann .price-1 mit einigen anderen <td> Klassen (dh .price-2, .price-3, .price-4 ...) summieren, um eine Gesamtsumme in $ Werten zu erhalten zeigt in #result.

Wie kann ich js oder jQuery verwenden, um diese td-Klassen zu summieren, um die Gesamtsumme zu erhalten?

Unten ist meine HTML meiner Tabelle, die ich zusammenfassen muss.

<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

Erhalten alle Elemente entweder tdattribute value contains selector oder zweiten td Element tr:nth-child() verwendet werden. Jetzt iterieren Sie über sie mit each() Methode und erhalten Sie Summe mit dem Text im Inneren.

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>

---

Mit Array#reduce Methode als @rayon vorgeschlagen.

$('#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 Objekt verfügt über eine direkt an der Anzahl der angepassten Elemente beziehen Attribut.

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