display property of a tr element

Christopher Benson-Manica

I'm trying to dynamically change the visibility of a table row. I can
hide the row, but I'm having trouble making it visible again. This is
what I have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function ready() {
var elem=document.getElementById( "tr" );
elem.style.display='none';
elem.style.display='table-row';
}
</script></head>
<body onload="ready()">
<table>
<tr id="tr">
<td>Hello, world!</td>
</tr></table></body></html>

Setting display to "none" works fine, but trying to set it back to
"table-row" (which is what it defaults to, right?) doesn't work (IE
and Firefox both say "invalid argument"). Does the following quote
from the W3C specification mean I can't do this?

"User agents may ignore these 'display' property values for HTML
documents, since authors should not alter an element's expected
behavior." [WRT table-related display property values]

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

Jul 21 '05 #1

Follow Post Reply

15918

Ali Babba

Christopher Benson-Manica wrote:

I'm trying to dynamically change the visibility of a table row. I can
hide the row, but I'm having trouble making it visible again. This is
what I have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function ready() {
var elem=document.getElementById( "tr" );
elem.style.display='none';
elem.style.display='table-row';

table-row is css2.1. not many browsers support css2.1
you will have more luck using css1

Jul 21 '05 #2

Richard

On Mon, 7 Feb 2005 15:17:31 +0000 (UTC) Christopher Benson-Manica wrote:

I'm trying to dynamically change the visibility of a table row. I can
hide the row, but I'm having trouble making it visible again. This is
what I have: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function ready() {
var elem=document.getElementById( "tr" );
elem.style.display='none';
elem.style.display='table-row';
}

elem.style.display="display:block;"
there is no attribute "table-row" which is the reason for the errors.

But why do you want to turn it off then immediately turn it back on?
You should check to see which condition it is in, then reverse as needed.

Jul 21 '05 #3

Michael Winter

Christopher Benson-Manica wrote:

[snip]

Setting display to "none" works fine, but trying to set it back to
"table-row" (which is what it defaults to, right?)
In compliant user agents, yes. However IE isn't compliant. It expects
the string 'block' (though that has a different meaning with compliant
user agents). The safest way of restoring the default is to assign an
empty string. Note that this will only work if:

- The document style sheet doesn't hide the element itself (and it
shouldn't for reasons of usability).
- You only modify the *inline* display property via style object.

There is a way to determine the expected value, but that shouldn't be
necessary in most cases.
Firefox [says] "invalid argument"
Which version of Firefox? Recent versions don't.
Does the following quote [snipped] from the W3C specification mean I can't do this?

It suggests you don't, but it doesn't say you can't. It allows vendors
to simplify their implementations. After all, it would be rather
unfair to require a resource-stricken platform to provide that
functionality.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 21 '05 #4

Michael Winter

Richard wrote:

[snip]

elem.style.display="display:block;"
Wrong. If you were setting a value of 'block', then assign the string,
'block'.
there is no attribute "table-row" which is the reason for the errors.
Wrong again. Have you read the CSS 2.x Specification?
But why do you want to turn it off then immediately turn it back on? [...]

I believe it's called an experiment. I thought you had a lot of
experience with those?

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 21 '05 #5

Christopher Benson-Manica

Michael Winter <m.******@blueyonder.co.invalid> spoke thus:

In compliant user agents, yes. However IE isn't compliant. It expects
the string 'block' (though that has a different meaning with compliant
user agents). The safest way of restoring the default is to assign an
empty string.
What do you think of changing the class of the element as a possible
alternative?
Which version of Firefox? Recent versions don't.
Hm, it seems that I was suffering from caffeine deficiency earlier
this morning, as I just tested the same page and Firefox was perfectly
happy with it.
It suggests you don't, but it doesn't say you can't. It allows vendors
to simplify their implementations. After all, it would be rather
unfair to require a resource-stricken platform to provide that
functionality.

So IOW changing it is not guaranteed to have an effect, but it is
safe to attempt to do so?

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

Jul 21 '05 #6

Michael Winter

Christopher Benson-Manica wrote:

Michael Winter <m.******@blueyonder.co.invalid> spoke thus:
The safest way of restoring the default is to assign an empty
string.
What do you think of changing the class of the element as a
possible alternative?

I wouldn't say it was very different. However, changing classes should
be a more expensive operation. If you meet the criteria I listed in my
previous post, I'd just go with the empty string.

[snip]
So IOW changing it is not guaranteed to have an effect,
Well, a definitive answer would be that a change to *any* property
isn't guaranteed to have an effect. However, it usually does.
but it is safe to attempt to do so?

Yes. A particularly vicious implementation might raise an exception if
you assign a value that it doesn't understand (but is otherwise valid)
rather than just ignoring it. Apart from that you should be fine.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 21 '05 #7

Christoph Paeper

*Christopher Benson-Manica* <at***@nospam.cyberspace.org>:

I'm trying to dynamically change the visibility of a table row.
Actually you're supposed to use just that property: 'visibility'. The
values would be 'collapse' and 'visible'. Implementation is probably even
worse than for "display: table-row", though.
function ready() {
var elem=document.getElementById( "tr" );
elem.style.display='none';
elem.style.display='table-row';
}

I would use switched classes and a 'get*' method accepting CSS selectors.

--
Every rose has its þ.

Jul 21 '05 #8

Brian

Richard wrote:

Christopher Benson-Manica wrote:

I'm trying to dynamically change the visibility of a table row.
<script type="text/javascript">
function ready() {
var elem=document.getElementById( "tr" );
elem.style.display='none';
elem.style.display='table-row';
}

elem.style.display="display:block;"

That will set the display to block, not table-row, giving very different
results in Firefox, Opera, and likely other conforming browsers.
there is no attribute "table-row"

You're in over your head. Please stop giving advice until you get a
better grip on the subject.

--
Brian

Jul 21 '05 #9

display property of a tr element

This discussion thread is closed

Similar topics