Personal Website of Yakov Shafranovich

« Foreign Press Calling for President’s Assasination         PalmOne Announces the Treo 650 »

Hiding Table Rows in DHTML

One of the more fun things in DHTML is dynamic manipulation of page content. An interesting question that recently came up at work was hiding and displaying a single table row. The solution I came up with is pretty simply - set the CSS STYLE tag of the table row to “display: none” to hide it and then set it to “display: table-row” to unhide it. The problem is that it won’t work in Internet Explorer, primarly due to the fact that the display property can be set to “table-row” only in CSS 2, not in CSS 1 where only “inline” or “block” is possible. Interner Explorer only supports CSS1 at this time.

So the logical solution would be to use “block” Unfortunatly, when using “block” for table rows in IE as recommended by Microsoft. HOWEVER, this will cause problems with non-Microsoft browsers if any cell inside such row uses COLSPAN. The solution - setting the display property to the display property of some other table row like this in Javascript:

hidden_row.style.display = visible_row.style.display;

You can try it out below, on IE ‘table-row’ will throw an error but everything else will work fine. On other browsers, the ‘block’ approach will not work:

Col 1	Col 2	Col 3

Tags: ajax, dhtml, firefox, ie, javascript, opera

Permalink | Trackback URL | This post has 822 Views