Help with jQuery selector

Question

I've got a table structured as follows with 10 rows:

<table>
    <tr id='row1'>
        <td>
            <input id='input1' type='text' class='data'>
        </td>
    </tr>
    <tr id='row2' class='hide'>
        <td>
            <input id='input2' type='text' class='data'>
        </td>
    </tr>
    <tr id='row3' class='hide'>
        <td>
            <input id='input3' type='text' class='data'>
        </td>
    </tr>
    .
    .
    .
    (down to 10 rows)
 </table>

What I need to do is when the value in 'input(X)' changes to "show" 'row(X+1)'. I've been trying to figure out how to "ascend" back to the parent "tr" of the input field and then somehow get the "tr" of the next row, but I'm not having much success.

My 'hide' class is as follows:

.hide, { display:none; }

Thanks!

Jon · Accepted Answer · 2011-09-17 14:41:50Z

2

Use closest("tr") to navigate upwards to the table row that contains the input whose value has changed, then next to get the next row and finally show it:

$("input.data").change(function() {
    $(this).closest('tr').next().show();
});

You may want to take a look at all the tree traversal methods, they are very useful.

answered Sep 17, 2011 at 14:41

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Help with jQuery selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related