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

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).然后,为了解释索引的变化(因为第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;
});

编辑:根据您所做的更新,这可能更符合您的追求吗？这个解决方案基本上通过切换td每个tr(即每行)中的倒数第二个和最后一个来修改HTML代码,并且修改了JS代码中的第一个CSS选择器,#sum_table tr:not(:first,:last) td:nth-child(5)以便在第二个中显示"Total"最后一列(即td每个适用行的第5 列).

无论出于何种原因,如果您希望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以编程方式交换倒数第二列和最后一列(而不是手动交换).