如何计算动态表格行的小计？

Question

我有看起来像这样的动态表格

Sl号：Item Desc。 ：数量。 ：价格：可用数量。 ：小计合计：操作：

我希望在每行中输入数量和价格后，计算每个小计的小计。使用jQuery或Javascript。

<table id="options-table" class="table table-striped table-bordered bootstrap-datatable datatable"> 
    <tr> 
      <td>Sl no :</td> 
      <td><i class="icon-pencil"></i> 
       Item Desc. : 
      </td> 
      <td><i class="icon-signal"></i> 
       Qty. : 
      </td> 
      <td><i class="icon-tag"></i> 
       Price : 
      </td> 
      <td><i class="icon-signal"></i> 
       Available Qty. : 
      </td> 
      <td><i class="icon-th"></i> 
       Sub Total : 
      </td> 
      <td><i class="icon-chevron-down"></i> 
       Actions: 
      </td> 
    </tr> 
    <tr> 
     <td>1&nbsp;</td> 
     <td><input type="text" id="itemname[]" name="itemname[]" value="" style="width:200px;" onchange="updateQuotation();"/></td> 
     <td><input type="text" id="qty[]"   name="qty[]" value="" style="width:50px;" onKeyUp="updateQuotation(this.id);"/></td> 
     <td><input type="text" id="price[]"  name="price[]" value="" style="width:50px;" onKeyUp="updateQuotation(this.id);"/></td> 
     <td><input type="text" id="availableqty[]"name="availableqty[]" value="" style="width:50px;" onchange="updateQuotation();"/></td> 
     <td><input type="text" id="total[]"  name="subtotal[]" value="" style="width:50px;" onchange="updateQuotation();"/></td>         
     <td><input type="button" class='del' value='Delete' /></td> 
    </tr>     
    <tr> 
     <td>2&nbsp;</td> 
     <td><input type="text" id="itemname[]" name="itemname[]" value="" style="width:200px;" onchange="updateQuotation();"/></td> 
     <td><input type="text" id="qty[]"   name="qty[]" value="" style="width:50px;" onKeyUp="updateQuotation(this.id);"/></td> 
     <td><input type="text" id="price[]"  name="price[]" value="" style="width:50px;" onKeyUp="updateQuotation(this.id);"/></td> 
     <td><input type="text" id="availableqty[]"name="availableqty[]" value="" style="width:50px;" onchange="updateQuotation();"/></td> 
     <td><input type="text" id="total[]"  name="subtotal[]" value="" style="width:50px;" onchange="updateQuotation();"/></td> 
     <td><input type="button" class="add" value="Add More" /></td> 
    </tr> 
</table> 

Answer 1

您需要将该ID设置为字段的唯一ID。

<script type="text/javascript"> 
function updateQuotation(id) 
{ 
    var price = $("#qty_"+id).val()*$("#price_"+id).val(); 
    $("#total_"+id).val(price); 
} 
</script> 

，并修改了代码为

<tr> 
         <td>1&nbsp;</td> 
         <td><input type="text" id="itemname[]" name="itemname[]" value="" style="width:200px;" onchange="updateQuotation();"/></td> 
         <td><input type="text" id="qty_1"   name="qty[]" value="" style="width:50px;" onKeyUp="updateQuotation(1);"/></td> 
         <td><input type="text" id="price_1"  name="price[]" value="" style="width:50px;" onKeyUp="updateQuotation(1);"/></td> 
         <td><input type="text" id="availableqty_1"name="availableqty[]" value="" style="width:50px;" onchange="updateQuotation(1);"/></td> 
         <td><input type="text" id="total_1"  name="subtotal[]" value="" style="width:50px;" onchange="updateQuotation(1);"/></td>         
         <td><input type="button" class='del' value='Delete' /></td> 
        </tr>     
        <tr> 
         <td>2&nbsp;</td> 
         <td><input type="text" id="itemname[]" name="itemname[]" value="" style="width:200px;" onchange="updateQuotation();"/></td> 
         <td><input type="text" id="qty_2"   name="qty[]" value="" style="width:50px;" onKeyUp="updateQuotation(2);"/></td> 
         <td><input type="text" id="price_2"  name="price[]" value="" style="width:50px;" onKeyUp="updateQuotation(2);"/></td> 
         <td><input type="text" id="availableqty_2"name="availableqty[]" value="" style="width:50px;" onchange="updateQuotation(2);"/></td> 
         <td><input type="text" id="total_2"  name="subtotal[]" value="" style="width:50px;" onchange="updateQuotation(2);"/></td> 
         <td><input type="button" class="add" value="Add More" /></td> 
        </tr> 

我认为这将帮助你计算小计。举例来说，我提供了通过乘以数量和价格来计算小计的代码。

Answer 2

使用下面这个jQuery代码来获得，然后汇总行明智

function updateQuotation(id) { 
      var qty = Number($(id).closest("tr").find("input[id*='qty']").val()); 
      var price = Number($(id).closest("tr").find("input[id*='price']").val()); 
      $(id).closest("tr").find("input[id*='total']").val(qty * price); 
      return false; 
     } 

和onkeyup事件只派这作为参数传递给函数

onKeyUp="updateQuotation(this);" 

，而不是this.id