Updating a text field updates a table cell (per row basis)

Question

I have a table for adding lines to an estimate to send to my clients, looking roughly like this:

<table>
    <thead>
        <tr>
            <th>Qty</th>
            <th>Kind</th>
            <th>Description</th>
            <th>Price</th>
            <th>Discount</th>
            <th>Tax</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" name="qty[]" class="qty" /></td>
            <td><!-- select field with different kinds of services --></td>
            <td><input type="text" name="desc[]" /></td>
            <td><input type="text" name="price[]" class="price" /></td>
            <td><input type="text" name="discount[]" class="discount" /></td>
            <td><!-- select field with tax rates --></td>
            <td class="total"><!-- here goes the total amount (qty * price - discount) --></td>
        </tr>
    </tbody>
</table>

<span class="subtotal"><!-- the total amount (all lines together) --></span>

When there's a keypress event on input.qty, input.discount and input.price, the td.total needs to be updated for the total sum on each line. I have a function where I can add several table rows, hence the array of inputs.

So what I need is when the input fields are updated, jQuery needs to update the following td.total. I tried with both, $('input.qty').keypress(function(){ $(this).next('td.total').html() }) but that didn't work.

Answer 1

The selector $(this).next('td.total') is the faulty one (since the td isn't a sibling of the changed input) - try with $('input.qty').keypress(function(){ $(this).next('td.total').html() })

[edit]

Actually the script should be

$('input.qty').live ('keypress', function(){
    $(this).parent().siblings('.total').html()
});

[/edit]