Re: Hiding a table row in Firefox

Giganews Newsgroups
Subject: Re: Hiding a table row in Firefox
Posted by:  Donkey Hottie (donk…@fred.pp.fi)
Date: Thu, 15 Oct 2009

15.10.2009 2:11, Patrick Nolan kirjoitti:
> There is an HTML table with two columns.  I would like to hide
> or reveal a row by clicking a box.  I worked out a way to do it
> which works for IE, but the result surprises me in Firefox.
>
> The HTML for the row looks like this:
> <tr id=foobar><td>data</td><td>Some text</td></tr>
>
> The button which controls it looks like this:
> <input type=button value="Flip the row" onClick="toggle('foobar');">
>
> The function that does the work is
> function toggle(element) {
>    var el = document.getElementById(element);
>    if (el.style.display == "none") el.style.display = "block";
>    else el.style.display = "none";
> }
>
> On IE, the row just appears and disappears neatly when I
> click the button.  On Firefox, the two<td>  contents are
> mashed together in the first column.
>
> Here it is graphically:
>
> With the column hidden:
> stuff    stuff
> stuff    stuff
>
> With the column visible:
> stuff          stuff
> dataSome text
> stuff          stuff
>
> The expected result:
> stuff    stuff
> data    Some text
> stuff    stuff

You can also set the display="" if you definitely don't want "block".
Block has caused grey hair to me earlier. I do not know what difference
does "block" do, but it is different from undefined.

Replies

In response to

Hiding a table row in Firefox posted by Patrick Nolan on Wed, 14 Oct 2009