I have a table each row of which represents a consecutive day. There may be many days.

At the moment, the class of each row is the day of the week.One of the columns of the table contains 7 boxes labelled M, T, W, T, F, S, S, M etc. There is one of these on each row.

<tr class='.$day[$i].'">
<td>".$date[$i]."</td>
<td>
M<input type='checkbox' onclick='myToggleClass(\"day1\");'>
T<input type='checkbox' onclick='myToggleClass(\"day2\");'>
...for each day...
</td>
</tr>


What I want to happen is that when I click M, T, W... all the rows of the class "day1","day2",... toggle on or off. (Actually, the rows from that date onwards only should toggle, but thats a refinement.)

I've got them to toggle off ok with:

var allPageTags = new Array();
function myToggleClass(theClass) {
var allPageTags=document.getElementsByTagName("*");
for (i=0; i<allPageTags.length; i++) {
var tag=allPageTags[i];
if(tag.className==theClass){
if(tag.style.display=='none'){
tag.style.display='block';
}else{
tag.style.display='none';
}
}
}
}

The problem arises when I want to toggle the rows back on. The rows re-appear ok, but not in their correct column. They are appended to the date in the first column rather than being in the second column.
There is no CSS that should affect the positioning.
Thanks
Tony