使用js或jQuery計算td類的總和

我有一個下拉選擇菜單，其中包含表示計算機數量的各種選項（即5,10,15,20 ......）。默認的選擇菜單值是5.我使用一些js將下拉選擇乘以數量（即10），並用.price-1類填充表td。因此，例如，如果用戶離開默認選擇5，那麼.price-1的計算值爲50.使用js或jQuery計算td類的總和

這工作正常。然後，我需要將.price-1和幾個其他的<td>類（即.price-2，.price-3，.price-4 ...）總計爲$ values中的總數在#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>

來源

2016-10-14 Rex

你已經試過了什麼？ – MJH

[基於類的表格列的所有值的總和可能重複]（http://stackoverflow.com/questions/9293492/sum-all-values-for-table-column-based-on-class） – MJH

獲取

或者使用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>

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

來源

2016-10-14 05:01:10

'[] .reduce.call（document.querySelectorAll（'[class * =「price-」]'），function（a，b）{return a + = + b.textContent || 0; }，0）;' ） – Rayon

@Rayon：哇，這將是很好:)更新與您的建議......感謝隊友:) –

@Rayon和Pranav，這是工作的兩個s有價值硬編碼到字段（.price-3和.price-4），但它不計算.price-1和.price-2中的計算值。我怎樣才能讓它包含.price-1和.price-2的計算值。正如我在原始文章中提到的那樣，這兩個選項將通過選擇下拉菜單進行填充，這些菜單將選定數字相乘，然後將結果張貼在.price-1和.price-2中。然後，我需要總計所有這些。再次感謝您的幫助！ – Rex

jQuery對象有直接屬性指的是匹配元素的數量。

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

來源

2016-10-14 05:16:21

使用js或jQuery計算td類的總和

回答

相關問題