auto sum for column not working

Question

I Trying do some calculation in table Using JQuery Its all working fine And tried to sum the last column values and append The total value.
While I am trying to do calculation The values get appending without calculating not getting Added Here code so far i tried
Thanks in Advance

Fiddle link :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>

onchange won't fire when you programmatically set the value. Fire autosum when the last correct value has been entered or look into mutation observers. — Mouser
– Mouser, Commented Nov 5, 2017 at 14:56
@charlietfl if enter the values in last column its need to get sum — Harish Karthick
– Harish Karthick, Commented Nov 5, 2017 at 16:37

nazmul.3026 · Accepted Answer · 2017-11-05 15:37:52Z

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

Collectives™ on Stack Overflow

auto sum for column not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related