Question

Consider the following HTML table:

<table id="myTable1">
    <tr id="TR1">
        <td><input type="text" id="quantity1" name="quantity1" /></td>
        <td><input type="text" id="weight1" name="weight1" /></td>
        <td><input type="text" id="sub_total1" name="sub_total1" /></td>
    </tr>
</table>

What i’m trying to accomplish here is that I need to update the value for the sub_total field on every row based on the values typed in the quantity and weight fields on the same row every time keyup() is triggered.

Now I believe this would be a much manageable task if the table I’m working on is static only. But the inclusion of the dynamic adding of table rows caused me troubles.

---

JQuery for dynamic addition of rows:

$(document).ready(function() {

var counter = 2;

$("#addButton").click(function() {

    $('#myTable1 tr:last').after(
        '<tr id="TR"><td><input type="text" name="quantity' + counter + 
            '" id="quantity' + counter + '" value=""></input></td>' +

        '<td><input type="text" name="weight' + counter + 
            '" id="weight' + counter + '" value=""></input></td>' +

        '<td><input type="text" name="sub_total' + counter + 
            '" id="sub_total' + counter + '" value=""></input></td></tr>'
    );

    counter++;
});
});

---

Here we have the formula to be used in computing for the sub_total:

var sub_total  = ((170 * first 10 kilos) + (70 * the remaining weight)) * (quantity);

So given the sample values:
quantity = 10
weight = 15, we should have

var sub_total  = ((170 * 10) + (70 * 5)) * (10);

---

I have the following as a start but ‘ not quite sure what to place inside these functions

$('#myTable1 input[id^=\'quantity\'], #myTable1 input[id^=\'weight\']').live('keyup',function() {

    $('#myTable1 input[id^=\'quantity\'], #myTable1 input[id^=\'weight\']').each(function(index, value) {
    });
});

Answer 1

You can use closest() to match the parent table row of the modified element. From there, it’s easier to locate the quantity, weight and sub_total elements:

$("#myTable1 [id^=quantity], #myTable1 [id^=weight]").live("keyup", function() {
    var $tr = $(this).closest("tr");
    var quantity = parseInt($("[id^=quantity]", $tr).val());
    var weight = parseInt($("[id^=weight]", $tr).val());

    var firstTen;
    if (weight <= 10) {
        firstTen = weight;
        weight = 0;
    } else {
        firstTen = 10;
        weight -= 10;
    }

    $("[id^=sub_total]", $tr).val((170 * firstTen + 70 * weight) * quantity);
});