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

Question

我有动态表，看起来像这样

Sl no：项目描述。 ：数量。 ：价格：可用数量。 ：小计：行动：

我想要在每行输入数量和价格时计算每个小计的小计...使用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