javascript 列的总和
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10803996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SUM Total for Column
提问by Redbox
please refer to previous question here: Sum total for column in jQuery
请在此处参考上一个问题：jQuery 中列的总和
i used Aymen's solution, but i edited it to suite my need. It stopped working, my code as below as seen at jsfiddle: http://jsfiddle.net/unKDk/15/
我使用了 Aymen 的解决方案，但我对其进行了编辑以满足我的需要。它停止工作，我的代码如下所示，见 jsfiddle：http: //jsfiddle.net/unKDk/15/
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Strawberry</td>
<td>Total By Row</td>
</tr>
<tr>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr>
<td class="rowAA">1</td>
<td class="rowAA">5</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
</tr>
</table>
Jquery part is
Jquery 部分是
var totals=[0,0,0,0,0];
$(document).ready(function(){
var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");
$dataRows.each(function() {
$(this).find('.rowAA').each(function(i){
totals[i]+=parseInt( $(this).html());
});
$(this).find('.rowBB').each(function(i){
totals[i]+=parseInt( $(this).html());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html("total:"+totals[i]);
});
});
- how to solve the problem that caused the jquery calculate wrongly.
- how to calculate total by row
- i need the class name exactly same.
- 如何解决导致jquery计算错误的问题。
- 如何按行计算总数
- 我需要完全相同的类名。
回答by Selvakumar Arumugam
I am not quite sure what you want, but if you just want to sum all rows by column then see below..
我不太确定您想要什么，但是如果您只想按列对所有行求和，请参见下文。
var totalsByRow = [0, 0, 0, 0, 0];
var totalsByCol = [0, 0, 0, 0, 0];
$(document).ready(function() {
var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");
$dataRows.each(function(i) {
$(this).find('td:not(.totalRow)').each(function(j) {
totalsByCol[j] += parseInt($(this).html());
totalsByRow[i] += parseInt($(this).html());
});
});
for (var i = 0; i < totalsByCol.length - 1; i++) {
totalsByCol[totalsByCol.length - 1] += totalsByCol[i];
}
$("#sum_table td.totalCol").each(function(i) {
$(this).html("total:" + totalsByCol[i]);
});
$("#sum_table td.totalRow").each(function(i) {
$(this).html("total:" + totalsByRow[i]);
});
});
回答by Sampson
Essentially you want to target all of the tdelements that are in the middle rows. Each time you cycle over a new td, you want to add its value to both the last td in its row (unless it is the last tdin the row), and also to the tdin the last row that shares its index.
本质上，您希望针对td中间行中的所有元素。每次循环遍历 new 时td，您都希望将其值添加到其行中的最后一个 td（除非它是td该行中的最后一个），以及td共享其索引的最后一行中的值。
$("#sum_table tr:not(:first,:last)").each(function(c,row) {
$("td",row).text(function(i,t) {
var n = parseInt( t, 10 ) || 0;
$(this).nextAll(":last-child").text(function(a,o) {
return n + ( parseInt( o, 10 ) || 0 );
});
$(row).nextAll("tr:last").find("td:nth-child("+(++i)+")").text(function(a,o){
return "Total: " + ( n + ( parseInt( o.replace(/[^\d]/g,""), 10 ) || 0 ) );
});
});
});
? This should work for any table of any size, not restricting you to x columns, or y rows.
? 这应该适用于任何大小的任何表格，而不是将您限制为 x 列或 y 行。
Fiddle: http://jsfiddle.net/unKDk/34/
小提琴：http: //jsfiddle.net/unKDk/34/
With Commentary
附评论
I would encourage you to read the comments in the example below as they will help you understand what is going on with each line.
我鼓励您阅读下面示例中的注释，因为它们将帮助您了解每一行的内容。
// For each table row that is not first or last
$("#sum_table tr:not(:first,:last)").each(function(c,row) {
// For each td within this row
$("td",row).text(function(i,t) {
// Determine numerical value of this td's content
var n = parseInt( t, 10 ) || 0;
// Find last td in this row, change its text
$(this).nextAll(":last-child").text(function(a,o) {
// Increment its value with the value of current TD
return n + ( parseInt( o, 10 ) || 0 );
});
// Find last row, and td within of same index as current td, change its text
$(row).nextAll("tr:last").find("td:nth-child("+(++i)+")").text(function(a,o){
// Increment its value (removing non-numbers) with the value of current td
return "Total: " + ( n + ( parseInt( o.replace(/[^\d]/g,""), 10 ) || 0 ) );
});
// End our td loop
});
// End our tr loop
});
