Making table rows visible/invisible in Netscape

[Harry Gould]

To all,

I'm a newbie here, so please bear with me.

I develop web pages for a company intranet where Internet Explorer 6
is the standard. Now I must develop a public internet website that is
browser-agnostic (i.e., works with Netscape, version 4x, 7x, etc). My
question is this: I have about 10 table rows, each tagged with a class
attribute (<tr class="billing" style="display:none">) that I wish to
make visible or invisible in response to a checkbox click. For IE, I
am calling this function:

function showBillingInfo ( thisCheckbox, billingClass ) {

var i;
var billingRows = document.all.tags("TR");
for ( i = 0; i < billingRows.length; i++ ) {
if ( billingRows(i).className == billingClass ) {
if ( thisCheckbox.checked == true ) {
billingRows(i).style.display = "inline";
} else {
billingRows(i).style.display = "none";
}
}
}
}

This works fine in IE. Can anyone tell me what the comparable approach
would be for Netscape browsers? I know how to test for specific
browsers; what stumps me is the proper syntax for referring to
document objects once a Netscape browser is detected. I tried using
"document.classes.billing.all.style.display = 'inline' " but that
didn't work.

Can anyone offer any working examples? What am I missing?

Thank you.


Harry Gould
Philadelphia Newspapers Inc.
(e-mail address removed)

 

[David Dorward]

billingRows(i).style.display = "inline";
} else {
billingRows(i).style.display = "none";

This works fine in IE. Can anyone tell me what the comparable approach
would be for Netscape browsers?

It would be "table-row" not "inline". I'm surprised inline works for IE, but
that browser is VERY VERY weird when it comes to tables and display
properties.

It owuld also be:

var billingRows = document.getElementsByTagName("TR"); (which is the W3C
standard and works in recentish versions of MSIE)

and perhaps also billingRows rather then billingRows(i)

I know how to test for specific browsers;

Oh dear. That suggests you don't know you _shouldn't_ test for specific
browsers.
http://jibbering.com/faq/#FAQ4_26

 

[DU]

To all,

I'm a newbie here, so please bear with me.

I develop web pages for a company intranet where Internet Explorer 6
is the standard. Now I must develop a public internet website that is
browser-agnostic (i.e., works with Netscape, version 4x,

Forget NS 4.x: whatever your code is, it will never work in that 6+ year
old browser. Its W3C DOM support is zero.

7x, etc). My

question is this: I have about 10 table rows, each tagged with a class
attribute (<tr class="billing" style="display:none">) that I wish to
make visible or invisible in response to a checkbox click. For IE, I
am calling this function:

function showBillingInfo ( thisCheckbox, billingClass ) {

var i;
var billingRows = document.all.tags("TR");

If MSIE 6 is the standard, then
document.getElementById("idTable").rows will return a collection of all
rows of the table with the id attribute "idTable". Resorting to this way
of creating a working array of rows is supported by MSIE 5+,
Mozilla-based browsers, Opera 7.x, etc. and most W3C DOM1 compliant
browsers;

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6156016

One point on your code: it seems to me there is no need to assign a
class name to each rows in your code.

for ( i = 0; i < billingRows.length; i++ ) {
if ( billingRows(i).className == billingClass ) {
if ( thisCheckbox.checked == true ) {
billingRows(i).style.display = "inline";

That looks suspicious. I wonder why this works under MSIE 6. I would
expect it to work only with

if (thisCheckbox.checked) {

billingRows.style.display = "block";

} else {
billingRows(i).style.display = "none";
}
}
}
}

This works fine in IE. Can anyone tell me what the comparable approach
would be for Netscape browsers? I know how to test for specific
browsers;

There is no need to detect browsers; only a need to verify the support
for attributes or methods by objects.

http://jibbering.com/faq/#FAQ4_26

what stumps me is the proper syntax for referring to

document objects once a Netscape browser is detected.

NS 7.x and MSIE 6 and Opera 7.x and Mozilla 1.x share a large chunk of
the same [W3C DOM 2 HTML] way to access|manipulate|insert DOM nodes in a
document. Proprietary DOM attributes and methods are pointless,
irrelevant once a standard has been defined and agreed upon by involved
parties. And this is the case here.

I tried using

"document.classes.billing.all.style.display = 'inline' " but that
didn't work.

Can anyone offer any working examples? What am I missing?

Thank you.


Harry Gould
Philadelphia Newspapers Inc.
(e-mail address removed)

Here's one:

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/TableRowColumnCollapse.html

If your table(s) have border-collapse:collapse, then this might be
problematic in recent Mozilla-browsers. The code can be adjusted to work
for column groups and row groups too. For practical purposes, the
support for visibility: collapse is too weak right now to implement it.
The code could be improved a bit more by resorting to default display
value for <tr>.


DU

 

[DU]

Harry Gould wrote:




It would be "table-row" not "inline".

billingRows.style.display = ""; //M. Honnenn
might/would be even more relevant

I'm surprised inline works for IE,

I agree. To avoid problems, I think it should be "block" for MSIE 5+.

but

that browser is VERY VERY weird when it comes to tables and display
properties.

It owuld also be:

var billingRows = document.getElementsByTagName("TR"); (which is the W3C
standard and works in recentish versions of MSIE)

or (faster, I believe)
var billingRows = document.getElementById("idTable").rows;
assuming there is several tables in the document

and perhaps also billingRows rather then billingRows(i)

I agree.

Oh dear. That suggests you don't know you _shouldn't_ test for specific
browsers.
http://jibbering.com/faq/#FAQ4_26

I agree.

DU

 

[Harry Gould]

billingRows(i).style.display = "inline";
} else {
billingRows(i).style.display = "none";

This works fine in IE. Can anyone tell me what the comparable approach
would be for Netscape browsers?

It would be "table-row" not "inline". I'm surprised inline works for IE, but
that browser is VERY VERY weird when it comes to tables and display
properties.

It owuld also be:

var billingRows = document.getElementsByTagName("TR"); (which is the W3C
standard and works in recentish versions of MSIE)

and perhaps also billingRows rather then billingRows(i)

I know how to test for specific browsers;

Oh dear. That suggests you don't know you _shouldn't_ test for specific
browsers.
http://jibbering.com/faq/#FAQ4_26

David,

Sorry for the lateness of this posting reply. Thank you for your
suggestings. Using "document.getElementsByTagName("TR") and changing
the syntax from "billingRows(i)" to "billingRows" did the trick.
The use of "table-row" instead of "inline" as a display property did
not work, so I'll stick with "inline" -- which apparently works fine
with IE6 and Netscape 7.

Other responders to this posting also have provided valuable insights
and I thank them all.


Harry Gould