jQuery, Tables, & Show / Hide

November 23, 2009 jQuery 1

So maybe I’m just an idiot and this would be obvious to others, but it completely confused me for a large portion of the night, so I thought I’d share in hopes of helping some other unfortunate soul.

The Problem

I was using a jQuery function to show / hide elements, first on a table row, then when that didn’t work, a table column. The problem is that jQuery’s show method sets an element’s display attribute to “block,” completely ignoring that it should instead be “table-column.” This causes some issues to say the least.

The Solution

Well this is where you’ve got some options… what I ended up doing was just creating a div element within the td and running the show / hide on that instead. You could as an alternative to this, create a custom show method that would simply set the display type correctly to table cell, column, or whatever.

One Comment

shinronin August 25, 2010 at 7:47 pm

hello, i stumbled across your page while investigating the display attribute weirdness you document above for a table of my own. this is what i did:

$( ‘#org_type_row’ ).hide();
$( ‘#org_type’ ).change( function() {
if ( $( this ).val() == ‘Other’ ) {
$( “#org_type_row” )
.css( ‘display’, ‘table-row’ )
.find( ‘> td’ )
.css( ‘display’, ‘table-cell’ )
.end()
.show();
}
else {
$( “#org_type_row” ).hide();
}
} );

i should probably use toggle(), but… that was my solution. i did find that show()’s animation effect apparently only works on elements with display: block. hide() doesn’t have this limitation oddly enough. this is jquery 1.3.2.

Hello. I'm Rob V.

And I'm a Webmaster.