Hiding and Displaying Table Rows

Album Cover: Blue Room EP

"Such a rush to do nothing at all."
Coldplay / Such a Rush

Posted on December 13, 2007 5:57 PM in Web Development
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

I was working on a script at work today that generates a pretty simple HTML form. The form accepts two types of input, and there's a pair of radio buttons at the top that lets the user choose which input type he or she wishes to use. I added a really simple JavaScript function that toggles the visible form inputs depending on the radio button selected (using the onChange() event).

Since the form elements are wrapped in a table, the first set of input options resides in two tr tags, while the second set of input options resides in its own pair of tr tags. Because the script has a default input method (the one displayed when a user first navigates to the page), I added a style attribute to the two tr tags that are associated with the non-default input method. In that style attribute, I added display: none; so the form elements contained by those tags would not be visible at startup.

Where I ran into a problem is in displaying the previously hidden form elements whenever the user chooses a different radio button. Hiding the previously visible options is as easy as the following:

var tr1 = document.getElementById('tr1');
tr1.style.display = 'none';

However, making the hidden elements visible again wasn't as easy as I thought it would be. In previous experience with the display attribute, I've either gone with none, inline or block. The latter two, in this case at least, did some weird things with my tr contents. inline did exactly what one would expect it to (but of course I tried it anyway), putting the child td tags' contents next to each other, even though it didn't make sense in the logical flow of the table (and its implied columns, etc.). block, however, which I expected to work nicely, actually shifted the contents off to the left side of the table. I'm not really sure why, but I'm pretty positive that was the correct behavior (now that I know the real answer to the problem).

What I didn't know was what was hurting me. If you take a look at the CSS Display Property page over at W3Schools, you'll see as I did that there are many other supported values for the display property in CSS. Sure enough, I found the description of the value table-row and gave it a try, doing something like the following:

var tr1 = document.getElementById('tr1');
tr1.style.display = 'table-row';

That made the hidden table rows show up exactly how I'd expect them to (in Firefox, at least...more on that later...).

Comments

Mike on December 14, 2007 at 8:30 AM:

I know it's probably not what you want to do, since it's not as clean and ideal as it should be, but there are a couple things you could try. You could get rid of the table for layout (but getting alignment just right can be tricky) and just use fieldsets, legends, and divs. You also could try wrapping your table cell content with a div that shows/hides based on the radio button selection. With the second method you'll end up with some of the table showing, since the browser will default the row to a certain height, so you may end up with some extra pixels of spacing between elements. But it will expand as expected when the table cell content appears.

Permalink

Bernie Zimmermann on December 14, 2007 at 7:15 PM:

Thanks for the pointers, Mike. I tried to fit my solution into the table model because it was already set up that way (even though I'm the one who set it up that way back in the day). If I had to start over, I'd go the div route (your first suggestion) since I've made that work in both Firefox and IE7 before. Amazingly enough, no one at work has complained about the fact that half of the tool doesn't work in IE7, but that's probably more likely due to the fact that not many people actually use the tool as opposed to the majority of them using the better web browser (but a guy can dream).

What's up with gray vs. grey? :)

Permalink

km websol web design on December 15, 2007 at 3:43 AM:

Once again, thanks for drawing attantion to this issue. I am using somewhat similer.

Permalink

Dave Capalbo on February 28, 2008 at 1:19 PM:

I ended up doing something really lame to correct this problem. I made another row, then another cell with a colspan totaling the total amount of columns. Then i put a div in and just did a block hide / show on the div. Lame.

Permalink

Jeremy on February 26, 2009 at 1:21 PM:

You could add a class to the row:

.hidden {display:none};

And then remove it the class name to show it again.

Prototype.js has a great addClassName and removeClassName method for that task.

Permalink

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.