1

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

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

2 回答 2

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

于 2013-04-30T09:39:44.533 回答
0

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

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

于 2013-04-30T09:37:44.430 回答