hiding table rows with javascript and css

[Andy Fish]

Hi,

I am trying to show/hide a group of table rows using javascript and CSS. if
I group them in a <tbody> element I can do:

my_tbody_element.style.display="none";

to hide them and

my_tbody_element.style.display="block";

to show them. This works in IE but doesn't work in css-compliant browsers,
because these use "table-row-group" instead (which IE doesn't support). I
have tried setting the style to "" or "default" but this doesn't work
either.

is there a simple cross-browser solution to this, or do I have to detect
which browser is in use?

TIA

Andy

[Martin Honnen]

Andy Fish wrote:

I am trying to show/hide a group of table rows using javascript and CSS. if
I group them in a <tbody> element I can do:

my_tbody_element.style.display="none";

to hide them and

my_tbody_element.style.display="block";

to show them.

It should suffice to set
my_tbody_element.style.display = "";
if all display to none settings are done with script as you have above.
Only if you had style rules in a style sheet e.g.
tbody { display: none; }
the script setting the inline style
style.display = "";
could not show the element as an empty inline style obviously doesn't
override a style rule.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Kiran Makam]

> > my_tbody_element.style.display="block";

Its working in IE because IE does not care about CSS2.
In the above code display value should be set as 'table-row' for CSS2
compliant browsers and 'block' for IE.

See fully working function below:

function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row";
var obj = document.getElementById(tbody);
obj.style.display = (obj.style.display != "none")? "none" : displayVal
;
}

Tested in NS7 and IE6.

- Kiran Makam

[Richard Cornford]

Kiran Makam wrote:

> my_tbody_element.style.display="block";

<snip> function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row"; <snip> Tested in NS7 and IE6.

But testing in Opera, Safari, Konqueror or IceBrowser would have
revealed how limited this approach is. The assumption that a browser
implementing document.all is IE has not been valid for many years now.

I would go along with Martin Honnen in this an use a technique that
works cross-browser.

Richard.

[Andy Fish]

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:cs*******************@news.demon.co.uk...

Kiran Makam wrote:

> my_tbody_element.style.display="block";

<snip>

function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row";

<snip>

Tested in NS7 and IE6.

But testing in Opera, Safari, Konqueror or IceBrowser would have
revealed how limited this approach is. The assumption that a browser
implementing document.all is IE has not been valid for many years now.

I would go along with Martin Honnen in this an use a technique that
works cross-browser.

Well I guess there is no such thing as a guaranteed cross-browser solution
when you're dealing with something like IE that is not standards-compliant.

After some more hunting, I found a solution which I'm pretty sure is
standard CSS but works in IE as well.

<style>
tbody.on { display:table-row-group; }
tbody.off { display:none; }
</style>

<script>
if (something) {
my_tbody_element.className = "on";
} else {
my_tbody_element.className = "off";
}
</script>

Andy

Richard.

[Grant Wagner]

"Andy Fish" <aj****@blueyonder.co.uk> wrote in message
news:vL******************@text.news.blueyonder.co. uk...

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:cs*******************@news.demon.co.uk...

Kiran Makam wrote:

> my_tbody_element.style.display="block";

<snip>

function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row";

<snip>

Tested in NS7 and IE6.

But testing in Opera, Safari, Konqueror or IceBrowser would have
revealed how limited this approach is. The assumption that a browser
implementing document.all is IE has not been valid for many years
now.

I would go along with Martin Honnen in this an use a technique that
works cross-browser.

Well I guess there is no such thing as a guaranteed cross-browser
solution when you're dealing with something like IE that is not
standards-compliant.

You are correct, there is no such thing as a guaranteed cross-browser
solution, but for the wrong reason. The problem is that some browsers
may not have a Style object as a property of each HTML element, or it
may support the Style object as a property but may not dynamically
update the screen when Style properties are changed via script.

However, the types of problems outlined above are not what you are
referring to. You want a simple solution that will allow you to
change -display- property of a TBODY from "none" back to the default
state (table-row-group), but IE does not support a -display- property
value of "table-row-group".

So, the solution is what Martin told you, and Richard referred you to
that solution.

The only possibility is that Martin's post did not appear on your news
server. In that case, I'll quote Martin's original post:

It should suffice to set
my_tbody_element.style.display = "";
if all display to none settings are done with script as you have above.
Only if you had style rules in a style sheet e.g.
tbody { display: none; }
the script setting the inline style
style.display = "";
could not show the element as an empty inline style obviously doesn't
override a style rule.

So the solution is to set TBODY.style.display = ""; (empty string). This
will result in the HTML element displaying it's content using the
default display mechanism for that element (block for <div>, inline for
<span>, table-row-group for <tbody>, etc).

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[phil_gg04]

I do this sort of thing:

stylesheet:
..hidden {
display: none;
}

script:
my_tbody_element.className="hidden";
my_tbody_element.className="";
I believe this is cross-browser. It is slightly more complicated if
there are other classes present. In this case I have these functions
to add and remove classes:

function add_class(e,c) {
e.className=e.className+" "+c;
}

function remove_class(e,c) {
cn=e.className;
p=cn.indexOf(c);
e.className=cn.substr(0,p)+cn.substr(p+c.length);
}
--Phil.

[DU]

Grant Wagner wrote:

"Andy Fish" <aj****@blueyonder.co.uk> wrote in message
news:vL******************@text.news.blueyonder.co. uk...

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:cs*******************@news.demon.co.uk...

Kiran Makam wrote:

>> my_tbody_element.style.display="block";

<snip>

function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row";

<snip>

Tested in NS7 and IE6.

But testing in Opera, Safari, Konqueror or IceBrowser would have
revealed how limited this approach is. The assumption that a browser
implementing document.all is IE has not been valid for many years
now.

I would go along with Martin Honnen in this an use a technique that
works cross-browser.
Well I guess there is no such thing as a guaranteed cross-browser
solution when you're dealing with something like IE that is not
standards-compliant.

You are correct, there is no such thing as a guaranteed cross-browser
solution, but for the wrong reason. The problem is that some browsers
may not have a Style object as a property of each HTML element, or it
may support the Style object as a property but may not dynamically
update the screen when Style properties are changed via script.

Also, it may support a css2 property but not entirely and there is no
way to verify/know this with javascript. E.g.: visibility = collapse.
Opera support documentation claims to support visibility collapse for
rows, columns, rowgroups and column groups but it does not according to
CSS2.1.
However, the types of problems outlined above are not what you are
referring to. You want a simple solution that will allow you to
change -display- property of a TBODY from "none" back to the default
state (table-row-group), but IE does not support a -display- property
value of "table-row-group".

So, the solution is what Martin told you, and Richard referred you to
that solution.

The only possibility is that Martin's post did not appear on your news
server. In that case, I'll quote Martin's original post:

It should suffice to set
my_tbody_element.style.display = "";
if all display to none settings are done with script as you have above.
Only if you had style rules in a style sheet e.g.
tbody { display: none; }
the script setting the inline style
style.display = "";
could not show the element as an empty inline style obviously doesn't
override a style rule.

So the solution is to set TBODY.style.display = ""; (empty string). This
will result in the HTML element displaying it's content using the
default display mechanism for that element (block for <div>, inline for
<span>, table-row-group for <tbody>, etc).

Personally, I first use visibility = collapse for Mozilla-based browsers.

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.5 :)

[Christoph Paeper]

*Andy Fish* <aj****@blueyonder.co.uk>:

I am trying to show/hide a group of table rows using javascript and CSS.
The correct CSS way would be "visibility: collapse":
<http://www.w3.org/TR/CSS2/tables.html#dynamic-effects>. I've never tried
that and doubt it's well supported, though.
my_tbody_element.style.display="none";
my_tbody_element.style.display="block";
IMO the best way of the JS part is a dynamically assigned class, not
'.style'. That's true for almost any JS-CSS interaction, a.k.a. "DHTML".
See <http://webdesign.crissov.de/Scripting/modifyClass.js> for some basic
functions/methods for that.
This works in IE but doesn't work in css-compliant browsers, because
these use "table-row-group" instead

tbody.show {display: block; display: table-row-group;}
tbody.hide {display: none;}

Switch¹ between those classes (if the aforementioned method indeed does
not work). It /should/ work and is at least better than JS browser filters.

--
"Music is essentially useless, as life is."
George Santayana