1

ユーザーが無制限の数の行を作成して（jquery-新しい行を追加）、複数の製品情報を追加できるフォームがあります。新しい行を作成すると、コードは次のようになります。

今私がやろうとしているのは、ユーザーが製品の数量と製品の価格の値を入力するたびに、合計を即座に計算し(product quantity* product price)て結果を入力に入力し、フォームの下部にある入力をtotal[]調整することです。total amount

jqueryを使用して入力の量が固定されている場合、これを行う方法は知っていますが、この状況では入力の量が固定されていないため、これを実現する方法についてはわかりません。

見せてくれませんか。

前もって感謝します ：）

 <tr>

   <td><input type="text" name="name[]" id="name_1" value=""></td>
   <td><input type="text" name="quantity[]" id="quantity_1" value=""></td>
   <td><input type="text" name="rate[]" id="rate_1" value=""></td>
   <td><input type="text" name="total[]" id="total_1" value=""></td>                        

 </tr>  

 <tr>

  <td><input type="text" name="name[]" id="name_2" value=""></td>
  <td><input type="text" name="quantity[]" id="quantity_2" value=""></td>
  <td><input type="text" name="rate[]" id="rate_2" value=""></td>
  <td><input type="text" name="total[]" id="total_2" value=""></td>                     

 </tr>  

   <!-- I have N number of rows like above. and at the bottom I have input for total -->
 <tr>

   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td><input type="text" name="totalamount" id="totalamount" value=""></td>                        

  </tr>
4

1 に答える 1

2

考えられる解決策の 1 つを次に示します。

$(":text[name='quantity[]'], :text[name='rate[]']").on("change", function() {
    var totalamount = 0;
    $("tr").each(function() {
        var quantity = +$(this).find(":text[name='quantity[]']").val() || 0;
        var rate = +$(this).find(":text[name='rate[]']").val() || 0;
        var subtotal = quantity * rate;
        $(this).find(":text[name='total[]']").val(subtotal);
        totalamount += subtotal;
    });
    $("#totalamount").val(totalamount);
});​

デモ: http://jsfiddle.net/ak49E/

于 2012-05-30T20:09:55.767 に答える