列の自動合計は

Question

です。テーブルで計算をやってみました。JQueryを使用しています。すべて正常に動作しています。最後の列の値を合計し、合計値を追加しようとしました。My Fiddle

$(document).ready(function(){ 
 
    \t $('.weight ,.purity').on('change',function(){ 
 
    \t \t var weight=$(this,'.weight').val(); 
 
     var purity=$(this,'.purity').val(); 
 
     var result=(weight*purity)/100;   
 
     $(this).parent().siblings().find('.netGms').val(result); 
 
    }); 
 
    $('.mCharge').on('change',function(){ 
 
    \t var weight=$('.weight').val(); 
 
    var mCharge=$(this).val(); 
 
    var result=(weight*mCharge); 
 
    $('.amount').val(result); 
 
    \t  
 
    }); 
 
$('.amount').on('change',function(){ 
 
\t autoSum() ; 
 
}); 
 
}); 
 

 
function autoSum() { 
 
    var $dataRows = $("#sum_table tr:not('.total, .title')"); 
 
    var totals = [0, 0, 0, 0, 0, 0, 0]; 
 
    console.log(totals); 
 
    $dataRows.each(function() { 
 
    $(this).find('.amount').each(function(i) { 
 
     totals[i] +=$(this).val(); 
 
    }); 
 
    }); 
 
    $("#sum_table td.totalCol").each(function(i) { 
 
    $(this).html("total:" + totals[i]); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <h2>Calculation Table</h2> 
 
    <p></p> 
 
    <table id="sum_table" class="table table-bordered"> 
 
    <thead class="titlerow"> 
 
     <tr> 
 
     <th>val3</th> 
 
     <th>val4</th> 
 
     <th>val5</th> 
 
     <th>val6</th> 
 
     <th>val7</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <input class='weight' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='purity' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='netGms' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='mCharge' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='amount' type="text" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input class='weight' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='purity' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='netGms' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='mCharge' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='amount' type="text" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td class="totalCol"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

：私は値がここ を追加しまし届かない計算せずに追加します計算を実行しようとしていますが
はコードこれまでのところ私は

フィドルリンクアドバンスに
感謝を試してみました

Answer 1

$(document).ready(function(){ 
 
    $(".amount").val(0); 
 
    \t $('.weight ,.purity').on('change',function(){ 
 
    \t \t var weight=$(this,'.weight').val(); 
 
     var purity=$(this,'.purity').val(); 
 
     var result=(weight*purity)/100;   
 
     $(this).parent().siblings().find('.netGms').val(result); 
 
    }); 
 
    $('.mCharge').on('change',function(){ 
 
    \t var weight=$('.weight').val(); 
 
    var mCharge=$(this).val(); 
 
    var result=(weight*mCharge); 
 
    $(this).closest('tr').find('.amount').val(result); 
 
    \t  total(); 
 
    }); 
 
    
 

 
}); 
 

 
function total(){ 
 

 
    var sum = 0; 
 
    $(".amount").each(function(){ 
 
    sum += parseInt($(this).val()); 
 
    }); 
 
    $('.totalCol').text(sum); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <h2>Calculation Table</h2> 
 
    <p></p> 
 
    <table id="sum_table" class="table table-bordered"> 
 
    <thead class="titlerow"> 
 
     <tr> 
 
     <th>val3</th> 
 
     <th>val4</th> 
 
     <th>val5</th> 
 
     <th>val6</th> 
 
     <th>val7</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <input class='weight' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='purity' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='netGms' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='mCharge' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='amount' type="text" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <input class='weight' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='purity' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='netGms' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='mCharge' type="text" /> 
 
     </td> 
 
     <td> 
 
      <input class='amount' type="text" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td class="totalCol"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>