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 に答える