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

这是一种可能的解决方案：

$(":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 回答