我正在尝试计算 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:
$("#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;
});
我希望表格看起来像这样的格式:
|Apples|Oranges|Watermelon|TotalRow|Strawberry|
Row1 |
Row2 |
Row3 |
Total|
最佳答案
如果您想防止表格中左下角和右下角的单元格显示总计(至少这是我对您问题的理解),您必须将选择器从 #sum_table tr:last td
更改为至#sum_table tr:last td:not(:first,:last)
。然后,为了解释索引的变化(因为第 1 列中的 td
元素已被排除),您必须更改 ++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;
});
编辑:根据您所做的更新,是 this也许更符合你所追求的?该解决方案基本上通过切换倒数第二个和最后一个 td
来修改 HTML 代码。每个 tr
中(即每一行),JS代码中的第一个CSS选择器修改为#sum_table tr:not(:first,:last) td:nth-child(5)
以便“总计”显示在倒数第二列中(即每个适用行的第 5 个 td
)。
如果出于某种原因,您希望 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;
});
这与本次编辑中上面介绍的第一个解决方案基本相同,只是倒数第二列和最后一列是使用 jQuery 以编程方式交换的(而不是手动手动交换)。
关于javascript - 使用jquery选择器计算html表中的列和行总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21041744/