Add/show each row by unique ID

Question

I would like to show each hidden row using the same button. When the user clicks add+ to display another hidden row. If that makes since.

I'm using this script to hide all table rows except the first one.

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.3.js'></script> <script type='text/javascript'> $(document).ready(function() { $('tr#row2, tr#row3, tr#row4, tr#row5, tr#row6, tr#row7, tr#row8, tr#row9, tr#row10, tr#row11').hide(); }); </script> </script> 

When the button (#add) is clicked once, if the row is not visible show next row otherwise remain hidden. This works well for displaying one table. How would I go about displaying the rest of the tables like this one without spitting them all out at once? I would like them displayed one by one.

 <script type="text/javascript"> $("#add").click(function () { if ($('tr#row2:visible').length==0) { $('tr#row2').show(); $("#add").attr('value','Remove'); } else{ $('tr#row2').hide(); $("#add").attr('value','Add'); } }); </script> 

The rest of the code looks something like this and each row has a different ID.
Any Ideas?

<table width="200" border="6">

<input id="add" type="button" value="Add" style="width:70px"/>
  <tr id="row1">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="row2">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="row3">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="row4">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="row5">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 1

If this isn't what you're after let me know and I'll see if I can't help you out. At least It may give you some ideas.

<script type='text/javascript'>
    var currentRow = 2;
    var previousRow = null;
    var defaultRowNumber = 2; // constant: For when we need to reset current row value.
    var resetRowNumberOn = 7; // constant: This looks odd but it's how the function and math works together.


    $(document).ready(function () { 
        $('tr#row2, tr#row3, tr#row4, tr#row5, tr#row6, tr#row7, tr#row8, tr#row9, tr#row10, tr#row11').hide();

        $("#add").click(function () {
            ShowHideRow(currentRow)
        });

        var ShowHideRow = function (rowNumber) {

            if ($('tr#row' + rowNumber + ' :visible').length == 0) {
                $('tr#row' + rowNumber).show();
                $("#add").attr('value', 'Remove');
            }
            else {
                $("#add").attr('value', 'Add');
            }

            if (typeof previousRow === 'number')
                $('tr#row' + (previousRow)).hide();

            previousRow = currentRow;
            currentRow++;

            if (currentRow === resetRowNumberOn) {
                currentRow = defaultRowNumber;
                $('tr#row' + (previousRow)).hide();
                previousRow = null;
            }            
        }
    });

</script>

<table width="200" border="6">

    <input id="add" type="button" value="Add" style="width:70px" />
    <tr id="row1">
        <td>1&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr id="row2">
        <td>2&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr id="row3">
        <td>3&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr id="row4">
        <td>4&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr id="row5">
        <td>5&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>