Computing for the value of the last column cell -- involves dynamic table rows

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) {
    });
});

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

var input_cols = $(
    '<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>'
).find('input[name=quantity], input[name=weight]').keyup(function() { updateTotal(this); });

$('#myTable1 tr:last').after(input_cols);

function updateTotal(el) {
  el = el.closest('tr');
  weight = el.find('input[name=weight]').val();
  quantity = el.find('input[name=quantity]').val();
  el.find('input[name=sub_total]').val( quantiy * weight .... put your formula here);
}

If your problem is : nothing happening for the dynamic fields it is obvious that the keyup event is not bound.

Bind the event using .bind() or call the to do on keyup inside the dynamically generated code.

Give different class name for different input field such as quantity weight sub_total and try this

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

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

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

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

          counter++;
          $('tr').each(function(){
            var qnty = 0
            var weight = 0;
            $('input.quantity', $(this)).keyup(function(){
              qnty = Number($(this).val());
              if(qnty != 0 && weight != 0){
                newRowCalculation($(this).parent().parent('tr'), qnty, weight);
              }

            });
            $('input.weight', $(this)).keyup(function(){
              weight = Number($(this).val());
              if(qnty != 0 && weight != 0){
                newRowCalculation($(this).parent().parent('tr'), qnty, weight);
              }
            });                        
          });

function newRowCalculation(elem, qnty, weight){
        if(weight > 10){
          var extraWeight = Number(weight - 10);
          var subTotal = (170 * 10 + 70 * extraWeight) * qnty;
          $('.sub_total', $(elem)).val(subTotal);
        }
        else{
          var subTotal = (170 * weight) * qnty;
          $('.sub_total', $(elem)).val(subTotal);
        }

      }