show/hide script 1

[klunde]

Hi

How can I use a javascript to show or hide several table rows that have the same id?

I would like to have a table like this:

<table>
<tr id="heading"><td><a href="javascript:void(0)" onclick="ShowHide('jan')>X</a>January</td></tr>
<tr id="jan"><td>1</td></tr>
<tr id="jan"><td>2</td></tr>
<tr id="jan"><td>3</td></tr>
<tr id="heading"><td><a href="javascript:void(0)" onclick="ShowHide('feb')>X</a>January</td></tr>
<tr id="feb"><td>1</td></tr>
<tr id="feb"><td>2</td></tr>
<tr id="feb"><td>3</td></tr>
</table>

Regards
</Morten>

</Morten>

 

[BillyRayPreachersSon]

ID's should be unique - so you shouldn't really be duplicating them. Suggest using a class instead. If you give the table an ID, then cycle through all rows, hiding ones that are of a certain class, you can avoid duplicating IDs.

Hope this helps,
Dan

 

[klunde]

Actually, my knowledge on Javascript is very limited so I do understand the outlines of what you suggests, but I have no idea on how to acomplish it... Do you by any chance have an example of how to cycle through the rows?


</Morten>

 

[BillyRayPreachersSon]

Let's say your table has an ID of "myTable", the following will let you loop through the rows:

var tableRows = document.getElementById('myTable').rows;
for (var loop=0; loop<tableRows.length; loop++) {
	// do something here with the row
}

Within the loop, you can test for a classname on each row, for example:

var tableRows = document.getElementById('myTable').rows;
for (var loop=0; loop<tableRows.length; loop++) {
	if (tableRows[loop].className == 'jan') {
		// do something for "jan" rows
	}
	if (tableRows[loop].className == 'feb') {
		// do something for "feb" rows
	}
}

Hope this helps,
Dan