Hide all elements of a specific class

The task seems simple but I am not sure whether this is possible or even
the right way to look at it...

I have <td class="X"> elements where "X" is a placeholder for class names
"A", "B", etc. Now I want to display/hide all <td> elements of a certain
class, say "A". The static CSS equivalent would be

<style type="text/css">
.A { visibility:visible; }
.B { visibility:hidden; }
...
</style>

but is it possible to dynamically change the visibility attribute for all
<td> elements of a certain class "A" using javascript in a simple way?

I mean, something syntactic simple like the pseudo code

document.<whatever("A")>.visibility = hidden;

Or do I have to iterate over the DOM tree and compare each element against
the class name?

Any hints very much appreciated.
--
Janis

* Janis Papanagnou wrote in comp.lang.javascript:

The task seems simple but I am not sure whether this is possible or even
the right way to look at it...

I have <td class="X"> elements where "X" is a placeholder for class names
"A", "B", etc. Now I want to display/hide all <td> elements of a certain
class, say "A". The static CSS equivalent would be

style type="text/css"
.A { visibility:visible; }
.B { visibility:hidden; }
...
/style

but is it possible to dynamically change the visibility attribute for all
td> elements of a certain class "A" using javascript in a simple way?

You can add/remove/enable/disable/change a special <style> element with
the desired rules; if you have very many matching elements that'll most
likely be the fastest approach.
--
Björn Höhrmann · mailto:bjoern (AT) hoehrmann (DOT) de · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/

Bjoern Hoehrmann wrote:

* Janis Papanagnou wrote in comp.lang.javascript:

The task seems simple but I am not sure whether this is possible or even
the right way to look at it...

I have <td class="X"> elements where "X" is a placeholder for class names
"A", "B", etc. Now I want to display/hide all <td> elements of a certain
class, say "A". The static CSS equivalent would be

style type="text/css"
.A { visibility:visible; }
.B { visibility:hidden; }
...
/style

but is it possible to dynamically change the visibility attribute for all
td> elements of a certain class "A" using javascript in a simple way?


You can add/remove/enable/disable/change a special <style> element with
the desired rules; if you have very many matching elements that'll most
likely be the fastest approach.

Thanks for your quick reply. As a (quite) newbie on the topic I seem to
be still missing something fundamental that is likely apparent to you.

I read your suggestion to change the style as something like, e.g.,

document.<whatever>.style.visibility = hidden;
????????

But how would I change the style of _all elements of a specific class_?
In other words; wouldn't I need some function like

get_elements_of_class("A")

to make the style change?

Or do you mean something different; can you please elaborate a bit?
--
Janis

* Janis Papanagnou wrote in comp.lang.javascript:

You can add/remove/enable/disable/change a special <style> element with
the desired rules; if you have very many matching elements that'll most
likely be the fastest approach.

Thanks for your quick reply. As a (quite) newbie on the topic I seem to
be still missing something fundamental that is likely apparent to you.

I am saying, among other suggestions, you can add and remove a construct
like

<style type="text/css">
.A { visibility:visible; }
.B { visibility:hidden; }
...
</style>

to the document using methods like createElement and appendChild.
--
Björn Höhrmann · mailto:bjoern (AT) hoehrmann (DOT) de · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/

On Jun 14, 7:30*pm, Janis Papanagnou <Janis_Papanag... (AT) hotmail (DOT) com>
wrote:

The task seems simple but I am not sure whether this is possible or even
the right way to look at it...

I have <td class="X"> elements where "X" is a placeholder for class names
"A", "B", etc. *Now I want to display/hide all <td> elements of a certain
class, say "A". The static CSS equivalent would be

* * * * *<style type="text/css"
* * * * * * * * *.A { visibility:visible; }
* * * * * * * * *.B { visibility:hidden; }
* * * * * * * * *...
* * * * *</style

but is it possible to dynamically change the visibility attribute for all
td> elements of a certain class "A" using javascript in a simple way?

I mean, something syntactic simple like the pseudo code

* * * * *document.<whatever("A")>.visibility = hidden;

Or do I have to iterate over the DOM tree and compare each element against
the class name?

Any hints very much appreciated.
--
Janis

What you could do is

1. Obtain an array of all td elements:

2. Go through them, setting the visibility attribute.

For example:

var tds = document.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
switch (td.className) {
case ("A") :
td.style.visibility = "none";
break;
case ("B") :
td.style.visibility = "visible";
break;
}
}

Obviously this is not a complete solution, you would have to do
whatever logic determines when "A" is visible and "B" is not, etc. But
it should get you started in the right direction.

Janis Papanagnou wrote on 15 jun 2008 in comp.lang.javascript:

The task seems simple but I am not sure whether this is possible or
even the right way to look at it...

I have <td class="X"> elements where "X" is a placeholder for class
names "A", "B", etc. Now I want to display/hide all <td> elements of
a certain class, say "A". The static CSS equivalent would be

style type="text/css"
.A { visibility:visible; }
.B { visibility:hidden; }
...
/style

but is it possible to dynamically change the visibility attribute for
all <td> elements of a certain class "A" using javascript in a simple
way?

I mean, something syntactic simple like the pseudo code

document.<whatever("A")>.visibility = hidden;

Or do I have to iterate over the DOM tree and compare each element
against the class name?

Any hints very much appreciated.

================================================== ======
<style type='text/css' id='s0'>
td.a {visibility:visible;}
</style>

<script type='text/javascript'>
var s0 = document.styleSheets[0]
var theRules = (s0.cssRules)
? s0.cssRules
: s0.rules;
</script>

<table border=1>
<tr>
<td class='a'>qwerty</td>
<td>asdfgh</td>
<td>zxcvbn</td>
</tr>
</table>

<br><button
onclick="theRules[0].style.visibility='hidden';">
Hide td with 'qwerty'
</button>
================================================== ========

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Thanks to all for your suggestions; they are very helpful! :-)
--
Janis

On Sun, 15 Jun 2008 18:42:56 +0200, Janis Papanagnou wrote:

Thanks to all for your suggestions; they are very helpful! :-)

Here's one more: quote part of the message to which you are replying. It
makes it much easier to follow the discussion (especially for people who
aren't veiwing the posts threaded).


--
Safalra (Stephen Morley)
http://www.safalra.com/

Safalra (Stephen Morley) wrote:

On Sun, 15 Jun 2008 18:42:56 +0200, Janis Papanagnou wrote:

Thanks to all for your suggestions; they are very helpful! :-)

Here's one more: quote part of the message to which you are replying.

Thanks. But my last posting wasn't a reply to any particular posting.
I didn't want to pick any specific posting to reply, since all of them
have been valuable to me. And I didn't think it's helpful to copy/paste
all the postings in one just to say "Thank you!".

It
makes it much easier to follow the discussion (especially for people who
aren't veiwing the posts threaded).

There was no discussion in my last posting, just an acknowledgement.
I think that's the least the helpful folks here can expect as reward
for their effort. :-)

Sorry for any inconvenience inflicted by that posting decision, and
for the waste of bandwidth I've done with the current posting. :-}
--
Janis

On Sat, 14 Jun 2008 20:30:29 -0300, Janis Papanagnou
<Janis_Papanagnou (AT) hotmail (DOT) com> wrote:

but is it possible to dynamically change the visibility attribute for all
td> elements of a certain class "A" using javascript in a simple way?

I don't think so, you can just make optimizations, like: if you need just
the <td> tags then: getElementsByTagName("td").

Some browsers have XPath processor (which is much faster than iterating
through JavaScript), you can give it a chance by finding any library that
unifies the different browser implementations in a single process.


--
Jonas Raoni Soares Silva
http://jsfromhell.com