How to do the calculation in the table using JavaScript?

Question

When I entered the order no it fetches the ponumber, podate, partyname and that table and i have written in AJAX to fetch the data that I have done.now I want to do some changes in the qty column if I have change any value the whole table of qty should be added and displayed in total text box using JavaScript. How to do the calculation of this table?

AJAX:

<script type="text/javascript">
$(document).ready(function(){
    $('#orderno').on('input change',function(){
         var orderno = $("#orderno").val();
    $.ajax({
        type: "POST",
        url: "<?php echo base_url();?>Inventory/Orderfetch",
        data: {
                orderno:orderno
        },
        datatype: 'json',   
        success: function (data) {
            $('#Product_Name_div').html(data); 
        }
        });
    });
}); 
</script>

Model:

function fetch_item($orderno){
 $this->db->where("orderno",$orderno);
  $this->db->select('*');
  $this->db->join('item_master', 'item_master.id = order_item.itname', 'left');
  $this->db->from('order_item');
  $query_result = $this->db->get()->result();
  $output = '<center><table class="table table-bordered table-striped table-xxs" id="tb2">
        <thead>
        <tr>
          <th>Sno</th>
          <th>Item Name</th>
          <th>Qty</th>
        <th>Unit Wgt</th>
        <th>Description</th>
      </tr>
     </thead>
  <tbody>';            

      if($query_result !='false'){
       $i=0; 

foreach ($query_result as $key => $value) { 

$output .='<tr> 
<td><input style="width:50px" name="sno[]" type="text" class="form-control input-xs" value="'.$value->sno.'" ></td> 
<td><input style="width:250px" name="itemname[]" type="text" class="form-control input-xs" value="'.$value->itemname.'" ></td> 
<td><input style="width:80px" name="qty[]" type="text" class="form-control input-xs" value="'.$value->qty.'" id="qty_'.$i.'" onchange="calculate('.$i.')"></td> 
<td><input style="width:90px" name="wgt[]" type="text" class="form-control input-xs" > </td> 
<td><input style="width:150px" name="desc[]" type="text" class="form-control input-xs" > </td> 
</tr>'; 
$i++;
}
$output .="</tbody>
</table></center>";
echo $output;
}
}

Calculation code:

    <script type="text/javascript">
    function calculate(id){ 

 var tds = document.getElementById('tb2').getElementsById('input');
 var sum = 0;
 for(var i = 0; i < tds.length; i++) 
 var qty=$("#qty_"+id).val(); 

alert(qty);

} 
</script>

From this I got a qty value, but I don't know how to sum this qty of the table.

Answer 1

Add class in qty field and loop through its value

function calculate(id){ 
	var total_qty = 0;
	var qty = document.getElementsByClassName("qty_cls");
	for(var i = 0; i < qty.length; i++)
	{
       if(qty[i].value != ''){
  	 total_qty += parseFloat(qty[i].value);
          }
	}
  alert(total_qty);

}

<table class="table table-bordered table-striped table-xxs" id="tb2">
        <thead>
        <tr>
          <th>Sno</th>
          <th>Item Name</th>
          <th>Qty</th>
        <th>Unit Wgt</th>
        <th>Description</th>
      </tr>
     </thead>
  <tbody>
  <tr> 
<td><input style="width:50px" name="sno[]" type="text" class="form-control input-xs" value="1" ></td> 
<td><input style="width:250px" name="itemname[]" type="text" class="form-control input-xs" value="1" ></td> 
<td><input style="width:80px" name="qty[]" type="text" class="form-control input-xs qty_cls" value="1" id="qty_1" onchange="calculate()"></td> 
<td><input style="width:90px" name="wgt[]" type="text" class="form-control input-xs" > </td> 
<td><input style="width:150px" name="desc[]" type="text" class="form-control input-xs" > </td> 
</tr>
<tr> 
<td><input style="width:50px" name="sno[]" type="text" class="form-control input-xs" value="'1" ></td> 
<td><input style="width:250px" name="itemname[]" type="text" class="form-control input-xs" value="2" ></td> 
<td><input style="width:80px" name="qty[]" type="text" class="form-control input-xs qty_cls" value="2" id="qty_2" onchange="calculate()"></td> 
<td><input style="width:90px" name="wgt[]" type="text" class="form-control input-xs" > </td> 
<td><input style="width:150px" name="desc[]" type="text" class="form-control input-xs" > </td> 
</tr>
<tr> 
<td><input style="width:50px" name="sno[]" type="text" class="form-control input-xs" value="'3" ></td> 
<td><input style="width:250px" name="itemname[]" type="text" class="form-control input-xs" value="3" ></td> 
<td><input style="width:80px" name="qty[]" type="text" class="form-control input-xs qty_cls" value="3" id="qty_3" onchange="calculate()"></td> 
<td><input style="width:90px" name="wgt[]" type="text" class="form-control input-xs" > </td> 
<td><input style="width:150px" name="desc[]" type="text" class="form-control input-xs" > </td> 
</tr>
</tbody>
</table>