javascript表列总计

Question

成为JavaScript的新手我一直在玩JSfiddle使用以下的html和javascript。 我似乎无法填充总数，但我真正想要做的只是最后一列，所以最终我可以在项目中使用代码的变体。 有人能指出我正确的方向吗？

<table id="sum_table" width="300" border="1">
    <thead>                
        <tr>
            <th>crop</th>
            <th>date1</th>
            <th>date2</th>
            <th>cropArea</th>
        </tr>
    </thead>
    <tr>
        <td>barley</td>
        <td>01/01/2015</td>
        <td>01/01/2016</td>
        <td>5</td>
    </tr>
    <tr>
        <td>apples</td>
        <td>01/01/2016</td>
        <td>01/01/2017</td>
        <td>4</td>
    </tr>
    <tr>
        <td>corn</td>
        <td>01/12/2016</td>
        <td>05/05/2017</td>
        <td>5</td>
    </tr>
    <tfoot>
        <tr>
            <td>Total:</td>
            <td>Total:</td>
            <td>Total:</td>
            <td>Total:</td>
        </tr>
    </tfoot>
</table>

$(document).ready(function()
{
    $('table  th').each(function(i)
    {
        calculateColumn(i);
    });
});

function calculateColumn(index)
{
    var total = 0;
    $('table tr').each(function()
    {
        var value = parseInt($('td', this).eq(index).text());
        if (!isNaN(value))
       {
        total += value;
       }
    });

    $('table tfoot td').eq(index).text('Total: ' + total);
}​

Answer 1

我已经更改了一些JavaScript，因此它仅适用于最后一列的 ：

$(document).ready(function(){
      var sum = 0;
      $('table tr').each(function(el){
      	var value = parseInt($(this).find('td:last').text());
        sum += value ? value : 0;
      })
      
      $('table tr:last td:last').html(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sum_table" width="300" border="1">
    <thead>                
        <tr>
            <th>crop</th>
            <th>date1</th>
            <th>date2</th>
            <th>cropArea</th>
        </tr>
    </thead>
    <tr>
        <td>barley</td>
        <td>01/01/2015</td>
        <td>01/01/2016</td>
        <td>5</td>
    </tr>
    <tr>
        <td>apples</td>
        <td>01/01/2016</td>
        <td>01/01/2017</td>
        <td>4</td>
    </tr>
    <tr>
        <td>corn</td>
        <td>01/12/2016</td>
        <td>05/05/2017</td>
        <td>5</td>
    </tr>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

Answer 2

只需在每行的最后一列添加一个类，即可简化逻辑。这将允许你的javascript只需循环遍历类并构建总和。

＆＃13;

＆＃13;

var sum = 0;
var values = document.getElementsByClassName('last-col');
for(var i = 0; i < values.length; i++) {
	sum += parseInt(values[i].innerHTML);
}
document.getElementById('sum').innerHTML = sum;

/* jQuery */
/*$('.last-col').each(function() {
	sum += parseInt($(this).html());
});
$('#sum').html(sum);*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sum_table" width="300" border="1">
    <thead>                
        <tr>
            <th>crop</th>
            <th>date1</th>
            <th>date2</th>
            <th>cropArea</th>
        </tr>
    </thead>
    <tr>
        <td>barley</td>
        <td>01/01/2015</td>
        <td>01/01/2016</td>
        <td class="last-col">5</td>
    </tr>
    <tr>
        <td>apples</td>
        <td>01/01/2016</td>
        <td>01/01/2017</td>
        <td class="last-col">4</td>
    </tr>
    <tr>
        <td>corn</td>
        <td>01/12/2016</td>
        <td>05/05/2017</td>
        <td class="last-col">5</td>
    </tr>
    <tfoot>
        <tr>
            <td>Total:</td>
            <td>Total:</td>
            <td>Total:</td>
            <td id="sum">Total:</td>
        </tr>
    </tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将您的数据行放入<tbody>，以将其与<thead>和<tfoot>行隔离开来。

然后，这是一个简单的tbody tr循环，并在每个

上获得最后td

＆＃13;

＆＃13;

$(function() {
  var lastColTotal = $('#sum_table tbody tr :last-child').get().reduce(function(sum, td) {
    return sum + (parseInt($(td).text(), 10) || 0)
  }, 0);

  $('#sum_table tfoot td:last').text('Total: ' + lastColTotal);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sum_table" width="300" border="1">
  <thead>
    <tr>
      <th>crop</th>
      <th>date1</th>
      <th>date2</th>
      <th>cropArea</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>barley</td>
      <td>01/01/2015</td>
      <td>01/01/2016</td>
      <td>5</td>
    </tr>
    <tr>
      <td>apples</td>
      <td>01/01/2016</td>
      <td>01/01/2017</td>
      <td>4</td>
    </tr>
    <tr>
      <td>corn</td>
      <td>01/12/2016</td>
      <td>05/05/2017</td>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;