Skip to content

April 10, 2010

Note on using .style.display on <TR id=… >

by Joe Kuan

I always thought .style.display property only have two values, ‘block’ and ‘none’, until I came across a problem on displaying and hiding a table row.

I have the following HTML script:

<TABLE class=... >
  <TD><SELECT name=row_option onchange="javascript:display_row();">
<TR id="eni"><TD>Drop:</TD><TD>...</TD></TR>
<TR id="meeni"><TD>Custom:</TD><TD>...</TD></TR>

What the above script does is basically when an option is selected, the ‘eni’ table row is displayed and ‘meeni’ row is hidden, vice versa when another option is selected.

The Javascript function (with Prototype) for setting the display:

function display_row(form_element) {
   if (form_element.row_option.selectedIndex == 0) {
     $('eni').style.display = 'block';
     $('meeni').style.display = 'none';
   } else {
     $('eni').style.display = 'none';
     $('meeni').style.display = 'block';

However, the problem is that the display of the table form mysteriously not aligned properly. Following is the screenshot:

After a while, looking up the HTML DOM reference, I never realised there is actually a number of values for style.display property. As soon as I replaced the keyword ‘block’ to ‘table-row’. The form is displayed as expected. Silly me.

I work for iTrinegy. Here are my other Javascript


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: