Question

我正在尝试计算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;
});

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;
});

修改：根据您所做的更新，this或许更符合您的目标？此解决方案基本上通过切换每个td中的倒数第二个和最后一个tr来修改HTML代码（即，在每一行中），并且JS代码中的第一个CSS选择器被修改为{ {1}}以便“Total”显示在第二个最后一列（即每个适用行的第5个#sum_table tr:not(:first,:last) td:nth-child(5)）。

如果出于某种原因，您希望HTML代码保持原样，并且您希望实现一个不涉及手动修改HTML代码的纯JS解决方案，您可以执行以下操作（ JSFiddle）：

td

这与上面编辑的第一个解决方案基本相同，除了使用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(){

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

2 个答案: