如何计算所有行表表查找的一列中的值总和

Question

我有一张这样的桌子：

HTML:

 <table>
    <tr><td>value1</td><td>value2</td><td>value3</td></tr>
    ....
    <tr><td>value1</td><td>value2</td><td>value3</td></tr>
</table>

并希望通过使用 jquery 添加动态行来计算表底部每一行的总和。

这是使用 jQuery 计算之前的示例表。

 2   3   4
7   1   2
32  58  4

这是 结果：

 2   3   4
7   1   2
32  58  4
41  62  10

查询：

 $("tr").each(function(){
    var tdCount= $(this).find("td").length;
    for(i=0;i<tdCount;i++)
    {
        newRow[i]+=parseInt($(this).eq(i).value);
    }
});
var row="<tr>";
for (i=0;i<newRow.length;i++)
    row+="<td>"+newRow[i]+"</td>";
row+="</tr>";
$("table").append(row);

原文由 Hossein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您需要使用结果动态创建一个新行，您可以使用 append 函数来实现：

 $(document).ready(function(){
  var result = [];
  $('table tr').each(function(){
    $('td', this).each(function(index, val){
        if(!result[index]) result[index] = 0;
      result[index] += parseInt($(val).text());
    });
  });

  $('table').append('<tr></tr>');
  $(result).each(function(){
    $('table tr').last().append('<td>'+this+'</td>')
  });
});

请参阅此处的示例： FIDDLE

原文由 pumpkinzzz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以像下面那样做。

 $('table tfoot td').each(function(index) {
    var total = 0;
    $('tbody tr').each(function() {
        total += +$('td', this).eq(index).text(); //+ will convert string to number
    });
    $(this).text(total);
})

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
    <tr><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>7</td><td>1</td><td>2</td></tr>
    <tr><td>32</td><td>58</td><td>4</td></tr>
    </tbody>
    <tfoot>
        <tr><td></td><td></td><td></td></tr>
    </tfoot>
</table>

更新： 用于动态总计行。

 var totalRow = '', columnNo = $('table tr:first td').length;

for (var index = 0; index < columnNo; index++) {
    var total = 0;
    $('table tr').each(function () {
        total += +$('td', this).eq(index).text(); //+ will convert string to number
    });
    totalRow += '<td>' + total + '</td>';
}

$('table').append('<tr>' + totalRow + '</tr>');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>7</td><td>1</td><td>2</td></tr>
    <tr><td>32</td><td>58</td><td>4</td></tr>
</table>

原文由 Ibrahim Khan 发布，翻译遵循 CC BY-SA 3.0 许可协议