Show / hide table row in Firefox versus IE

November 28, 2008

Hiding a table row is fine, just set document.getElementById(‘theRow’).style.display = ‘none’

When you’re trying to show it though, it can get confusing – for it to display properly, you’ve to set display=’table-row’ for Firefox and display=’block’ for IE.

The solution? Set display=” and the display property for the element gets set to its default (‘table-row’ for FF and ‘block’ for Explorer).

Advertisements

21 Responses to “Show / hide table row in Firefox versus IE”

  1. Kae Verens Says:

    that’s bloody cool! I’ve had to do that many times in the past, and each time, I did a browser-check.

    thanks!

  2. Gregory Says:

    thank you very much for a such fresh solution!

  3. Seth Says:

    Thanks!

    Why can’t they just be the same!

  4. Peter Says:

    Thank you kind sir I really couldn’t be arsed with browser detection!

  5. Matt Says:

    Great solution! Thanks.

  6. billyjoe Says:

    You’re a freaking genius. Saved me a bunch of time messing with this.

  7. WolfBoy Says:

    Great man! Thanks for publishing this, perfect solution! 🙂

  8. Frank Says:

    I’ve been trying to solve this for two days. Your solution worked perfect to turn a table on and off and an iframe within a table.

  9. Greg Says:

    You have no idea how useful this is.

    Thanks for posting!

  10. Mike Bogo Says:

    Simple and brilliant. Thanks!

  11. JDS Says:

    For anyone who is scratching their heads wonder why this works for everyone else and not them…. make sure you do not have a CSS display property on the row in question. Since my row was to be hidden by default, I had a CSS snippet of:

    tr.hide {display:none}

    For whatever reason, this defeats the blank-string-default method mentioned here (i.e. it works with an explicit “table-row”, or, poorly, with “block”, but refuses to show up again with a style.display of “”). If I do the hiding when the row is created in JS instead, ala:

    tr.style.display=”none”;

    the method works fine.

  12. Michael Says:

    Thanks for the post! Awesome solution, been scratching my head over this for days.

  13. Edmond Says:

    Thanks! This helped me squash an IE error I was getting when adding table rows with jQuery. Setting it to ‘table-row’ was working great in FF but not in IE.

  14. Paul Says:

    Thanks for this post… great help!

    P

  15. Jeux Says:

    voila une info utile merci !

  16. Blitzly Says:

    Cool!!

    Thanks a lot, really helpful!

    Cheers!


  17. Thanks for this post, its a tip to remember!

    And thanks JDS for your follow on post, that helped a lot

  18. Simon Says:

    it works…thanks !!!!

  19. vlvp Says:

    that’s a brilliant solution.
    cheers

  20. Thankful Person Says:

    +1 for me! Thanks Lots!!


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: