Hiding multiple table rows

[bvallet]

I have to hide certain rows in a table under certain conditions. What I'm doing is something like this:

<TABLE>
<TR>
	<TD CLASS=&quot;mainlabel&quot;>
		Stuff to show
	</TD>
</TR>
<TR ID=&quot;hide&quot;>
	<TD CLASS=&quot;mainlabel&quot;>
		Stuff to be hidden
	</TD>
</TR>
<TR ID=&quot;hide&quot;>
	<TD CLASS=&quot;mainlabel&quot;>
		more stuff to be hidden
	</TD>
</TR>
<TR>
	<TD CLASS=&quot;mainlabel&quot;>
		More stuff to show
	</TD>
</TR>
</TABLE>

<input type=button value=&quot;Hide&quot; onClick=&quot;
	for(x=0 ; x < hide.length ; x++){
		hide[x].style.visibility = 'hidden';
		hide[x].style.display = 'none';
	}
&quot;>

The button is just to play with. Eventually there will be a function that toggles between hiding and showing the rows.

Now this works, but according to my reference books, the ID attribute must be unique for each element. So, am I setting myself up for a fall here, or is this OK? I don't want to get it working and then lose the functionality in the next browser upgrade.

Anyone have any ideas? And if this isn't kosher, can anyone suggest an alternative?

I would be greatly appreciative of any help.

 

[Mighty]

Are you always going to be hiding consecutive rows. If so you can just enclose the two rows in a div or layer and hide that.

<TABLE>
<TR>
<TD CLASS=&quot;mainlabel&quot;>
Stuff to show
</TD>
</TR>
<DIV ID=&quot;hide&quot;>
<TR>
<TD CLASS=&quot;mainlabel&quot;>
Stuff to be hidden
</TD>
</TR>
<TR>
<TD CLASS=&quot;mainlabel&quot;>
more stuff to be hidden
</TD>
</TR>
</DIV>
<TR>
<TD CLASS=&quot;mainlabel&quot;>
More stuff to show
</TD>
</TR>
</TABLE>

Mise Le Meas,

Mighty

 

[bvallet]

I tried that and, unless I was doing something wrong, it didn't work.