Create invisible table rows visible one by one

Question

I have the following situation.

I have a couple of rows of a table in a table, for example

<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 they are all invisible

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

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

Answer 1

Pretty possible.

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

If the button has a button identifier and a table table.

:hidden, , , :first.

jsfiddle