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

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

使用下面的 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

Answer 2

您需要将 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>

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