CODEWITHSUNDEEP
javascriptjqueryhtml
Mick Segvezent
Mick Segvezent

Reputation: 117

Use function $(this) and next() etc in table

<table>
    <tr>
        <td class="one"><input type="text"></td><td class="two"><input type="text" value="12"></td><td class="three"><input type="text"></td>
    </tr>
    <tr>
        <td class="one"><input type="text"></td><td class="two"><input type="text" value="22"></td><td class="three"><input type="text"></td>
    </tr>
    <tr>
        <td class="one"><input type="text"></td><td class="two"><input type="text" value="14"></td><td class="three"><input type="text"></td>
    </tr>
</table>

$(".one input").change(function(){
   ???
})

LIVE: http://jsfiddle.net/34Vtk/

If i fill value to first column (.one) then this value should be multiplied by .two input.val() and result should show in .three.input.val() .

I can make this with ID, but i can't use function $(this) and next() :( These input is a lot and i must use for this $(this) and next(), not ID.

Upvotes: 2

Views: 60

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to use both $(this) and the parent tr element as a context.

Try this:

$(".one input, .two input").change(function() {
    var $row = $(this).closest("tr");
    var $one = $(".one input", $row);
    var $two = $(".two input", $row);

    var val1 = $one.val();
    var val2 = $two.val();
    var val3 = val1 * val2;

    $(".three input", $row).val(val3);
});

Example fiddle

You will most likely also need to attach this to the .two input as well so that the figure gets updated when that element changes too, and also some form of validation to ensure valid numbers are entered.

This code can be shortened, I've just made it a bit more verbose to make it as clear as possible what's happening.

Upvotes: 1

Related Questions