使用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) 。 然后，要考慮索引的變化（由於不包括第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以編程方式進行交換（而不是手動進行交換）。

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(){