Jquery/javsacript onclick display next row

Question

I have a table that has a row that is hidden using display:none. I want to show the row when a button is clicked. How can I do this??

<table>

<tr>
<td>
<button class="shownextrow">Show Next Row</button>
</td>
</tr>

<tr style="display:none">
<input type="text" name="input"/>
</tr>

</table>

Answer 1

You can bind to the button and find it relatively, like this:

$("button.shownextrow").click(function() { 
  $(this).closest("tr").next().show();
});

This goes from the button ($(this)) up to the <tr> using .closest() then gets the .next() sibling <tr> to .show(). You may want to use .toggle() instead of .show() but the rest is the same.

You can give it a try here. Note that you have a <input> directly in a <tr> in the example, I wrapped this in a <td> to make it a valid demo.