Hiding and showing a table row using JavaScript

Hiding a table row in JavaScript is very easy. Give your row an ID, and then call this function:

     document.getElementById("rowID").style.display = "none";

The row will disappear. But showing it again is a little more tricky. If you’re testing in Internet Explorer you’ll probably discover that this works:

     document.getElementById("rowID").style.display = "block";

… but that it doesn’t do what its supposed to in Firefox. Unfortunately this is one of the situations where browsers have gone in slightly different directions to make our jobs more fun. The standards purists blame IE for this, and they’re probably right, but I’m more interested in making the code work!

To get the row to display again in Firefox you need to use “table-row” instead of block. Naturally this won’t work in IE so you need to detect which browser the user is using:

     if (navigator.appName.indexOf('MSIE')==-1 && navigator.appName.indexOf('Internet Explorer')==-1)
         document.getElementById("rowID").style.display = "table-row";
     else
         document.getElementById("rowID").style.display = "block";

You should now get your row back in either browser.

June 14th, 2009 in Development | tags: , , , ,

Leave a comment

Your comment