I needed to create a list with columns and below each item to have a details list using the same columns. As much as I rather use DIV’s more often. I decided to use a single table. I fgued to just give every TR an Id and hide the child rows based on that.

First my parent rows and named “detail_1″. The child rows are named “detail_1_1, detail_1_2, detail_1_3, ect…”. I just did a simple loop to get threw and touch them all. I past in a row count to avoid any confusion of with to stop.

This was all easy till I got to referencing an elemets style and the value for the display property. I knew that if the element doesn’t have a style property that you just refer to the property directly. The main problem was what to set the display property to. In Mozilla “block” displays as a cell. In IE “table-row” is not supported. Which all confused me because this is the first JavaScript function that I’ve written and it didn’t work in IE but did in Mozilla. It all threw me off and I spent two days trying to figure it out. So, if you need to hide and TR, this is how you do it.

[code]1 function getreference(_id) {
2 if( document.layers ) return document.layers[_id];
3 if( document.getElementById ) return document.getElementById(_id);
4 if( document.all ) return document.all[_id];
5 if( document[_id] ) return document[_id];
6 return false;
7 }
8
9 function toggledetail(_row_id, _row_count) {
10 element = getreference(_row_id + "_1");
11 element_display = (element.style) ? element.style.display : element.display;
12 display_value = (document.all) ? "block" : "table-row";
13 showhide = (element_display == display_value || element_display == "") ? "none" : display_value;
14 plusminus = (element_display == display_value || element_display == "") ? "plus" : "minus";
15 for (i = 1; i <= _row_count; i++) {
16 element = getreference(_row_id + "_" + i);
17 if(element.style) element.style.display = showhide;
18 else if(element.display) element.display = showhide;
19 }
20 document.images["toggle_" + _row_id].src = "images/icon_details_" + plusminus + ".gif";
21 }[/code]

My code explained.
Line 10 gets the element from what ever broswer is being use.
Line 11 gets the element display.
Line 12 determines to use “block” (IE) or “table-row” (Moz).
Line 13 determines if the element is hiding or shown.
Line 14 is the toogling for the tooge image.
Line 15 is the loop to hide all the rows within the row count.
Line 20 switched the toogle images src.

Popularity: 8% [?]