Go Back to JavaScript :: Dynamic Site Solutions

Hiding and Unhiding Table Rows

IE4+/Win, Firefox, Netscape 6+ (it's a little buggy in 6.0 - 7.0 though), Opera 7+, Konqueror (it's a little buggy in versions before 3.4), Safari, and IE5/Mac. The correct display type for <tr> elements is table-row. IE/Win thinks it's block, so we have to use one value for IE/Win and the correct value for other browsers. IE4-6/Win and IE5/Mac use the CSS1 values of the display property instead of the CSS2 values, however, curiously, IE5.5-6/Win and IE5/Mac seem to support the inline-block value proposed in CSS2.1.

There are two ways to do this. The better way is to use a try/catch block pair, however, that causes errors in IE4 and Netscape 4.x, which don't support it. A technique known as conditional compilation (IE4+ only) can be used to hide try/catch block pair from IE4, but Netscape 4.x would still see it and show errors. (This is the version used for the demonstration.)

The second way is to use object detection to detect IE. And before you start thinking about document.all, no we're not using it, because several other browsers support it in order to be compatible with antique scripts on legacy web pages. The one advantage this method has over the try/catch method is that it doesn't cause errors in IE4 or Netscape 4.x. (The main function for this version is inside the <script> element that is in the HTML comment.)

Demonstration

Row One
Row Two
Row Three
Last update: 2006-09-20