javascript table columns total

Question

JavaScriptにはじめての私は、次のhtmlとjavascriptを使用してJSfiddleで遊んでいます。 集計フッターを作成することはできませんが、実際にやりたいことは最後の列の合計だけなので、最終的にプロジェクトのコードにバリエーションを使用できます。 誰かが私を正しい方向に向けることができますか？あなたは、単にクラスを追加することで、このためのロジックを簡素化することができ

$(document).ready(function(){ 
 
     var sum = 0; 
 
     $('table tr').each(function(el){ 
 
     \t 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 1

は、私には、JavaScriptを少し変更しました各行の最後の列に移動します。これは、あなたのjavascriptは、クラスをループし、合計を構築することができます。

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

 
/* jQuery */ 
 
/*$('.last-col').each(function() { 
 
\t sum += parseInt($(this).html()); 
 
}); 
 
$('#sum').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 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>

Answer 2

：それは最後の列のためだけを働くよう

<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 3

<thead>と<tfoot>行からそれらを分離する<tbody>にあなたのデータ行を入れてください。

そして、それはそれは私の作品tbody tr以上の単純なループであり、それらの

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

<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>