[英]Calculating column and row sum in html table using jquery selectors
我正在尝试计算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;
});
编辑 :根据您所做的更新, 这也许更符合您的要求? 此解决方案基本上是通过切换每个tr
(即,每行)中倒数第二个和最后一个td
修改HTML代码的,并且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以编程方式进行交换(而不是手动进行交换)。
这是你想要的? http://jsfiddle.net/unKDk/335/
我改变了这个
$("#sum_table tr:last")
至
$("#sum_table tr:last td:not(:first,:last)")
和
$(this).parent().prevAll().find("td:nth-child("+(++i)+")").each(function(){
至
$(this).parent().prevAll().find("td:nth-child("+(i + 2)+")").each(function(){
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.