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>