Вычисление значений N числа входов с использованием jquery

Question

У меня есть форма, в которой пользователи могут создавать неограниченное количество строк (используя jquery-add new row), чтобы добавить информацию о нескольких продуктах. Когда они создают новые строки, код выглядит следующим образом.

Теперь то, что я пытаюсь сделать, это когда каждый раз, когда пользователь помещает значение количества продукта и цены продукта, я хочу, чтобы мгновенно вычислить общую (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>       

Answer 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); 
});​ 

DEMO:http://jsfiddle.net/ak49E/