添加具有多个标题的表的总和

Question

我的 drupal 视图会生成一个拆分为多个表 thead 和 tbody 的表，我需要将每个 tbody 的列和行的总和而不是所有表的总和

我有这个代码，见代码here

HTML

<table id="sum_table" width="300" border="1">
     <thead> 
    <tr class="titlerow">
            <td></td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>Total By Row</td>
        </tr>
    </thead> 
         <tbody> 
        <tr>
            <td> Row1</td>
            <td class="rowAA">1</td>
            <td class="rowAA">2</td>
            <td class="rowBB">3</td>
            <td class="rowBB">4</td>
            <td class="totalRow"></td>
        </tr>
        <tr>
            <td> Row2</td>
            <td class="rowAA">1</td>
            <td class="rowAA">2</td>
            <td class="rowBB">3</td>
            <td class="rowBB">4</td>
            <td class="totalRow"></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>
    </tbody>

     <thead> 
    <tr class="titlerow">
            <td></td>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td>
            <td>DD</td>
            <td>Total By Row</td>
        </tr>
    </thead> 
         <tbody> 
        <tr>
            <td> Row1</td>
            <td class="rowAA">11</td>
            <td class="rowAA">22</td>
            <td class="rowBB">33</td>
            <td class="rowBB">44</td>
            <td class="totalRow"></td>
        </tr>
        <tr>
            <td> Row2</td>
            <td class="rowAA">11</td>
            <td class="rowAA">22</td>
            <td class="rowBB">33</td>
            <td class="rowBB">44</td>
            <td class="totalRow"></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>
    </tbody>

     <thead> 
    <tr class="titlerow">
            <td></td>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
            <td>DDD</td>
            <td>Total By Row</td>
        </tr>
    </thead> 
         <tbody> 
        <tr>
            <td> Row1</td>
            <td class="rowAA">111</td>
            <td class="rowAA">222</td>
            <td class="rowBB">333</td>
            <td class="rowBB">444</td>
            <td class="totalRow"></td>
        </tr>
        <tr>
            <td> Row2</td>
            <td class="rowAA">111</td>
            <td class="rowAA">222</td>
            <td class="rowBB">333</td>
            <td class="rowBB">444</td>
            <td class="totalRow"></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>
    </tbody>
</table>

CSS

#sum_table {
 white-space: nowrap;   
}
#sum_table td {
 padding: 5px 10px;   
}

onLoad 中的 JavaScript

$("#sum_table tr:not(:first,:last)  td:last-child").text(function(){
    var t = 0;
    $(this).prevAll().each(function(){ 
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return t;
});

$("#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;
});

如何在每个类别之后求和？
非常感谢

Answer 1

这是一个FIDDLE，可以满足您的大部分需求。

我刚刚看到你对每个人之后的总数的评论......我将不得不再努力一点。还是可以的。

JS

var totrow = 0, totcol=0;             //setting totalsforrow and totalsforcolumns variables to zero

$('.numrow').each( function(){       //for each of the rows with class='numrow'
    for(var n=1; n<5; n++)           //do a loop four times for the right column totals
    {
     totrow = totrow + parseInt( $(this).children("td:eq("+ n +")").text() );
     }                                              //grab the values of each of the four tds and add them together
    $( $(this).children('td:eq(5)') ).html(totrow); //put the summed value in the 'total' td
    totrow = 0;                                     // reset the value for the next "each .numrow"
});

for(var m = 1; m < 5; m++) //for loop for four column totals
{
  $('.numrow').each( function(){ // for each of the rows with class .numrow
       totcol = totcol + parseInt($(this).children("td:eq("+ m +")").text() );//add up values
       console.log(totcol); // just a view of the totcol printed to the console log
                                });
    $( "#sum_table tr:eq(11) td:eq(" + m + ")" ).html( 'Col total: ' + totcol );//put total at bottom of column
  totcol = 0; //reset total to get read for the next loop
}

---

编辑：这是更新FIDDLE。这是蛮力的，不优雅的，但它有效。