Making invisible table rows visible one by one

Question

I have the following situation

I have a couple of table rows within a table eg

<tr><td>One</td></tr>
<tr><td>Two</td></tr>
<tr><td>Three</td></tr>
<tr><td>Four</td></tr>
<tr><td>Five</td></tr>

Say all of them are invisible

Then I have a button to make them visible one by one, so if row 1 is invisible and I press the button then row 1 should be visible, if I press it again it sees that row 1 is already visible then it makes row 2 visible and so it goes on and on and on.

How can I do this in Jquery so that jquery can accomplish this task for me. Is it possible?

Answer 1

Quite possible.

$('#button').click(function(){
    $('#table tr:hidden:first').show();
});

Where the the button has an id of button and the table of table.

This just uses the :hidden filter selector to find the rows that are not shown and then chooses the :first one.

Working example at jsfiddle