javascript - 如何使用JavaScript进行表格中的计算？

Question

当我输入订单号时，它会获取 ponumber、podate、partyname 和该表，并且我已经用 AJAX 编写来获取我已完成的数据。现在，如果我有更改，我想在 qty 列中进行一些更改应使用 JavaScript 添加整个数量表中的任何值并显示在总计文本框中。这个表如何计算？

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>

型号:

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;
}
}

计算代码:

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

从中我得到了一个数量值，但我不知道如何对表中的这个数量求和。

Answer 1

在 qty 字段中添加类并循环其值

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>