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.
go****@phillynews.com

[David Dorward]

Harry Gould wrote:

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("T R"); (which is the W3C
standard and works in recentish versions of MSIE)

and perhaps also billingRows[i] 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 Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>

[DU]

Harry Gould wrote:

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-HTM...tml#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[i].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.
go****@phillynews.com

Here's one:

http://www10.brinkster.com/doctorunc...nCollapse.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]

David Dorward wrote:

Harry Gould wrote:

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".

billingRows[i].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[i] rather then billingRows(i)

I agree.

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

I agree. :)

DU

[David Dorward]

DU wrote:

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

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

Safer at least. One might run into problems if non-inline style was used to
set the default display property to other then block (IE) or table-cell
(real web browsers).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>

[Harry Gould]

David Dorward <do*****@yahoo.com> wrote in message news:<c8*******************@news.demon.co.uk>...

Harry Gould wrote:

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("T R"); (which is the W3C
standard and works in recentish versions of MSIE)

and perhaps also billingRows[i] 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[i]" 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