Working with dynamically created input arrays in jQuery

I have a dynamic form with the following fields

<tr>
 <td><input name = "qty[]" /></td>
 <td><input name = "color[]" /></td>
 <td><input name = "price[]" /></td>
 <td><input name = "total[]" /></td>
</tr>

I can dynamically add as many rows as I want. What I 开发者_JS百科would like to accomplish is having total = qty*price for each row with a click of a button. Any suggestions?

Modified your HTML a bit

<tr>
 <td><input name = "qty[]" /></td>
 <td><input name = "color[]" /></td>
 <td><input name = "price[]" /></td>
 <td><input name = "total[]" /></td>
 <td><input type='text' name='total' /></td>
</tr>

jQuery code

$("#button1").click(function(){
    var trElems = $("#tab tr");

    trElems.each(function(){
        var qty = $(this).find("input[name='qty[]']").val();
        var price = $(this).find("input[name='price[]']").val();
        var total = parseFloat (qty) * parseFloat (price);

        $(this).find("input[name='total']").val(total);
    });

See a working demo