使用jquery选择器计算html表中的列和行和

Question

我正在尝试计算html表中的行和列总数。然而，我正在尝试计算直到倒数第二列的行总数。我可以做到最后一列，但不能做到倒数第二列。我还想从第一列中删除总计：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;
});

JSFiddle

我希望表格的格式如下：

|Apples|Oranges|Watermelon|TotalRow|Strawberry|
Row1 |
Row2 |
Row3 |
Total|    

Answer 1

如果您想防止表中左下角和右下角的单元格显示合计(至少我是这样理解您的问题的)，您必须将选择器从#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)，以便"总计"显示在倒数第二列(即每适用行的第五个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以编程方式交换(而不是手动交换)。

Answer 2

这就是您想要的吗？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(){