javascript 使用jquery选择器计算html表中的列和行总和
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21041744/
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
Calculating column and row sum in html table using jquery selectors
提问by ivan
I am trying to calculate the row and column total in an html table. However, I am trying to calculate the row total up to the second to last column. I can do it up to last column but not up to second to last. I also want to remove Total:0 from the first column. Can you please help me, below is my code:
我正在尝试计算 html 表中的行和列总数。但是，我正在尝试计算倒数第二列的行总数。我可以做到最后一列，但不能做到倒数第二。我还想从第一列中删除 Total:0。你能帮我吗，下面是我的代码：
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td></td>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Total By Row</td>
<td>Strawberry</td>
</tr>
<tr>
<td> Row1</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="totalRow"></td>
<td class="rowBB">4</td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="totalRow"></td>
<td class="rowBB">4</td>
</tr>
<tr>
<td>Row3</td>
<td class="rowAA">1</td>
<td class="rowAA">5</td>
<td class="rowBB">3</td>
<td class="totalRow"></td>
<td class="rowBB">4</td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</table>
JS:
JS：
$("#sum_table tr:not(:first,:last) td:nth-last-child(2)").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(++i)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
I want the table to look like this format :
我希望表格看起来像这种格式：
|Apples|Oranges|Watermelon|TotalRow|Strawberry|
Row1 |
Row2 |
Row3 |
Total|
回答by Frolin Ocariza
If you want to prevent the bottom-left and bottom-right cells in the table from displaying the total (at least this is how I understand your question), you'll have to change your selector from #sum_table tr:last tdto #sum_table tr:last td:not(:first,:last). And then, to account for the shift in indices (since the tdelement in column 1 has been excluded), you'll have to change ++ito i+2. Here's an updated version of the second part of your JS code (JSFiddle):
如果您想防止表格中左下角和右下角的单元格显示总数（至少我是这样理解您的问题），您必须将选择器从 更改#sum_table tr:last td为#sum_table tr:last td:not(:first,:last)。然后，为了说明索引的变化（因为第td1 列中的元素已被排除），您必须更改++i为i+2. 这是您的 JS 代码（JSFiddle）第二部分的更新版本：
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
Edit: Based on the update you made, is thisperhaps more in line with what you're after? This solution basically modifies the HTML code by switching the second-last and last td's in each tr(i.e., in each row), and the first CSS selector in the JS code was modified to #sum_table tr:not(:first,:last) td:nth-child(5)so that the "Total" gets displayed in the second last column (i.e., the 5th tdof each applicable row).
编辑：根据您所做的更新，这可能更符合您的要求吗？该解决方案基本上通过切换td每个tr（即每行）中的 second-last 和 last 来修改 HTML 代码，并且将 JS 代码中的第一个 CSS 选择器修改为#sum_table tr:not(:first,:last) td:nth-child(5)“总计”显示在第二个最后一列（即td每个适用行的第 5列）。
If, for whatever reason, you want the HTML code to stay as is and you'd like to implement a purely-JS solution that doesn't involve modifying the HTML code by hand, you can do something like the following (JSFiddle):
如果出于某种原因，您希望 HTML 代码保持原样，并且希望实现不涉及手动修改 HTML 代码的纯 JS 解决方案，则可以执行以下操作（JSFiddle）：
//Swap the second-last and last columns
$("#sum_table tr td:last-child").each(function(){
var lastRowContent = $(this)[0].innerHTML;
var secondLastRowContent = $(this).parent().find("td:nth-child(5)")[0].innerHTML;
$(this).parent().find("td:nth-child(5)")[0].innerHTML = lastRowContent;
$(this)[0].innerHTML = secondLastRowContent;
});
$("#sum_table tr:not(:first,:last) td:nth-child(5)").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
This is basically the same as the first solution presented above in this edit, except the second-last and last columns are swapped programmatically using jQuery (instead of being manually swapped by hand).
这与上面在此编辑中呈现的第一个解决方案基本相同，除了倒数第二列和最后一列使用 jQuery 以编程方式交换（而不是手动交换）。
回答by Sumit
Is this what you are looking for? http://jsfiddle.net/unKDk/335/
这是你想要的？ http://jsfiddle.net/unKDk/335/
I changed this
我改变了这个
$("#sum_table tr:last")
to
到
$("#sum_table tr:last td:not(:first,:last)")
and
和
$(this).parent().prevAll().find("td:nth-child("+(++i)+")").each(function(){
to
到
$(this).parent().prevAll().find("td:nth-child("+(i + 2)+")").each(function(){
