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

編輯：根據您所做的更新，爲this也許更符合你以後？該解決方案基本上通過切換每個tr（即每行）中的倒數第二個和最後一個td來修改HTML代碼，並且將JS代碼中的第一個CSS選擇器修改爲#sum_table tr:not(:first,:last) td:nth-child(5)，以便顯示「總計」在最後一列（即每個適用行的第5個td）中。

如果出於任何原因希望HTML代碼保持原樣，並且您希望實現純粹的JS解決方案而不涉及手動修改HTML代碼，則可以執行以下操作（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(){