javascript - 列的自动求和不起作用

Question

我尝试使用 JQuery 在表中进行一些计算，一切正常并尝试对最后一列值求和并附加总值。
当我尝试进行计算时值会在不计算未添加的情况下附加到目前为止我试过这里的代码
提前致谢

fiddle 链接: My Fiddle

$(document).ready(function(){
   	$('.weight ,.purity').on('change',function(){
  		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(){
  	var weight=$('.weight').val();
    var mCharge=$(this).val();
    var result=(weight*mCharge);
    $('.amount').val(result);
    	   
  });
$('.amount').on('change',function(){
	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);
   	$('.weight ,.purity').on('change',function(){
  		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(){
  	var weight=$('.weight').val();
    var mCharge=$(this).val();
    var result=(weight*mCharge);
     $(this).closest('tr').find('.amount').val(result);
    	    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>