Question

So I basically have multiple rows in the format:

<tr class="items" id="items">
    <td><input type="text" name="description[]" id="description[]" style="width:450px;" /></td>
    <td><input type="text" name="quantity[]" id="quantity[]" style="width:40px;text-align:center;" onblur="CaclulateQuantityTotal();"/></td>
    <td><input type="text" name="cost[]" id="cost[]" style="width:40px;text-align:center;" onblur="CaclulateCostTotal();"/></td>
    <td><select name="currency[]" id="currency[]"><option value="USD">USD</option><option value="CAD">CAD</option></select></td>
    <td style="text-align:right;"><input type="text" name="total[]" id="total[]" style="width:40px;text-align:center;" readonly="readonly" /></td>
    <td><a href="#" id="add_item">+</a></td>
</tr>

I basically would like total[] to be (for that row) cost * quantity.

My problem is I know how to loop through all of the quantity[] and the currency[] separately using jquery, but I can’t figure out how to match them up on a per row basis.

Can anyone help with this?

Answer 1

$('tr.items').each(function(i,el) {
    var $this = $(this),
        $cost = $this.find('[name="cost\\[\\]"]'),
        $quant = $this.find('[name="quantity\\[\\]"]'),
        c = parseFloat($cost.val()),
        q = parseInt($quant.val(), 10), // always use a radix
        total = c * q || 0; // default value in case of "NaN"
    $this.find('[name="total\\[\\]"]').val(total.toFixed(2));
});

http://jsfiddle.net/mblase75/AtcPc/