Javascript to show next table row if current row is poulated

I have an HTML table which is poulated by a user. The first colum in the row has a drop down box where they select an option generated by a mysql database.

This is for an orders table and the order could consist of 1 row to 72 rows. When the form loads, I only want 1 row to be displayed. When the select an option on the first row, the second row must appear. when an option is selected from the 2nd row, the 3rd row appears. and all the way to the end where row 72 only appears if an option is selected from row 71.

I hope this makes sense.

Below is my HTML table ( for 5 rows only)

<table>
<tr>
    <td>
        <select name="users" onchange="showUser(1, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint1"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr>
    <td>
        <select name="users" onchange="showUser(2, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint2"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr>
    <td>
        <select name="users" onchange="showUser(3, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint3"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr>
    <td>
        <select name="users" onchange="showUser(4, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint4"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr>
    <td>
        <select name="users" onchange="showUser(5, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint5"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

</table>

I know this is not a coding forum but I have searched the net for a while for a relevant example and found nothing. my javascript knowledge is very verly limited, if someone could point me in the right direction it would be greatly appreciated.

Thanks and regards, Ryan Smith

Update 17 Jan 2012.

Below please find a simplified script which I cannot get to work correctly.

<html>
 <head>

<script type="text/javascript"> 
  function showUser(userNumber, str) 
    {
    document.getElementById("r"+index).style.display="block" 
    }
</script> 

 </head>
 <body>


<table> 
<tr id="r1"> 
<td><select name="users" onchange="showUser(1, this.value)">  
        <OPTION VALUE=1> 
        1 
        </option> 
        <OPTION VALUE=2> 
        2
        </option>
        <OPTION VALUE=3> 
        3 
        </option> 
        </SELECT> 
</td> 
</tr> 
<tr id="r2" style="display:none;"> 
<td><select name="users" onchange="showUser(2, this.value)">  
        <OPTION VALUE=1> 
        1 
        </option> 
        <OPTION VALUE=2> 
        2
        </option>
        <OPTION VALUE=3> 
        3 
        </option> 
        </SELECT> 
</td> 
</tr> 
</tr> 
<tr id="r3" style="display:none;"> 
<td><select name="users" onchange="showUser(3, this.value)">  
        <OPTION VALUE=1> 
        1 
        </option> 
        <OPTION VALUE=2> 
        2
        </option>
        <OPTION VALUE=3> 
        3 
        </option> 
        </SELECT> 
</td> 
</tr> 
</table> 

</body>
 </html>

The javascript function does not appear to be getting called correctly with the on change event.

Thanks and Regards,

Ryan Smith

Solution

Set the ids for the rows in a sequential order and then set display property of the every row to display:none, except the first one and in the showUser method called on the each row while performing the selection, set the display for the subsequent row to display:block. You will get it working.

For example:

<table>
<tr id="r1">
<td><select name="users" onchange="showUser(2, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> </option>
        </SELECT>
</td>
</tr>
<tr id="r2" style="display:none;">
<td><select name="users" onchange="showUser(3, this.value)" size=1> 
        <OPTION VALUE=0>
        <?=$optionssku?> </option>
        </SELECT>
</td>
</tr>
</table>
function showUser(index,val)
{
 document.getElementById("r"+index).style.display="block"
//your code
}

Edit Part

Ok I am guessing what you want just change the size=1 to size=2 in the tag. You will get the values within the dropdown list box itself.

Edit on Jan17 Hey change your function as shown below

<script type="text/javascript"> 
  function showUser(userNumber, str) 
    {
    document.getElementById("r"+(userNumber+1)).style.display="block" 
    }
</script>

Hope this helps you.