Hide all elements of a specific class

[Janis Papanagnou]

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"elemen ts where "X" is a placeholder for class names
"A", "B", etc. Now I want to display/hide all <tdelements of a certain
class, say "A". The static CSS equivalent would be

<style type="text/css">
.A { visibility:visi ble; }
.B { visibility:hidd en; }
...
</style>

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

I mean, something syntactic simple like the pseudo code

document.<whate ver("A")>.visib ility = 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

[Bjoern Hoehrmann]

Re: Hide all elements of a specific class

* Janis Papanagnou wrote in comp.lang.javas cript:

>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"elemen ts where "X" is a placeholder for class names
>"A", "B", etc. Now I want to display/hide all <tdelements of a certain
>class, say "A". The static CSS equivalent would be
>
<style type="text/css">
.A { visibility:visi ble; }
.B { visibility:hidd en; }
...
</style>
>
>but is it possible to dynamically change the visibility attribute for all
><tdelements of a certain class "A" using javascript in a simple way?

You can add/remove/enable/disable/change a special <styleelement 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@h oehrmann.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/

[Janis Papanagnou]

Re: Hide all elements of a specific class

Bjoern Hoehrmann wrote:

* Janis Papanagnou wrote in comp.lang.javas cript:
>

>>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"elemen ts where "X" is a placeholder for class names
>>"A", "B", etc. Now I want to display/hide all <tdelements of a certain
>>class, say "A". The static CSS equivalent would be
>>
> <style type="text/css">
> .A { visibility:visi ble; }
> .B { visibility:hidd en; }
> ...
> </style>
>>
>>but is it possible to dynamically change the visibility attribute for all
>><tdelements of a certain class "A" using javascript in a simple way?

>
>
You can add/remove/enable/disable/change a special <styleelement 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.<whate ver>.style.visi bility = 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

[Bjoern Hoehrmann]

Re: Hide all elements of a specific class

* Janis Papanagnou wrote in comp.lang.javas cript:

>You can add/remove/enable/disable/change a special <styleelement 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:visi ble; }
.B { visibility:hidd en; }
...
</style>

to the document using methods like createElement and appendChild.
--
Björn Höhrmann · mailto:bjoern@h oehrmann.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/

[SAM]

Re: Hide all elements of a specific class

Janis Papanagnou a écrit :

>
But how would I change the style of _all elements of a specific class_?

cleverly you did what to do :-)

try :

<html>
<style type="text/css">
td.A { color: blue }
td.B { color: red }
td.A, td.B, td.C { visibility: visible }
..A td.A, .B td.B, .C td.C { visibility: hidden }
</style>

<table id="tabl" border=1>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
<tr>
<td class="A">1.1</td><td class="B">1.2</td><td class="C">1.3</td>
</tr><tr>
<td class="A">2.1</td><td class="B">2.2</td><td class="C">2.3</td>
</tr><tr>
<td class="A">3.1</td><td class="B">3.2</td><td class="C">3.3</td>
</tr>
</table>
<select onchange="var C=['A','B','C'], k=this.selected Index;
if(k!=0) document.getEle mentById('tabl' ).className = C[k-1];">
<option>Hide td of class :
<optionA
<optionB
<optionC
</select>
<input type = reset onclick="docume nt.getElementBy Id('tabl').clas sName='';">
</html>

In other words; wouldn't I need some function like
>
get_elements_of _class("A")
>
to make the style change?

no, you give a class to the table :

document.getEle mentById('tabl' ).className='A' ;

--
sm

[Tom Cole]

Re: Hide all elements of a specific class

On Jun 14, 7:30 pm, Janis Papanagnou <Janis_Papanag. ..@hotmail.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"elemen ts where "X" is a placeholder for class names
"A", "B", etc.  Now I want to display/hide all <tdelements of a certain
class, say "A". The static CSS equivalent would be
>
         <style type="text/css">
                 .A { visibility:visi ble; }
                 .B { visibility:hidd en; }
                 ...
         </style>
>
but is it possible to dynamically change the visibility attribute for all
<tdelements of a certain class "A" using javascript in a simple way?
>
I mean, something syntactic simple like the pseudo code
>
         document.<whate ver("A")>.visib ility = 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.getEle mentsByTagName( "td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
switch (td.className) {
case ("A") :
td.style.visibi lity = "none";
break;
case ("B") :
td.style.visibi lity = "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.

[Evertjan.]

Re: Hide all elements of a specific class

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

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"elemen ts where "X" is a placeholder for class
names "A", "B", etc. Now I want to display/hide all <tdelements of
a certain class, say "A". The static CSS equivalent would be
>
<style type="text/css">
.A { visibility:visi ble; }
.B { visibility:hidd en; }
...
</style>
>
but is it possible to dynamically change the visibility attribute for
all <tdelements of a certain class "A" using javascript in a simple
way?
>
I mean, something syntactic simple like the pseudo code
>
document.<whate ver("A")>.visib ility = 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:vis ible;}
</style>

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

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

<br><button
onclick="theRul es[0].style.visibili ty='hidden';">
Hide td with 'qwerty'
</button>
=============== =============== =============== =============

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

[Janis Papanagnou]

Re: Hide all elements of a specific class

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

[Safalra (Stephen Morley)]

Re: Hide all elements of a specific class

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/

[Janis Papanagnou]

Re: Hide all elements of a specific class

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

[Jonas Raoni]

Re: Hide all elements of a specific class

On Sat, 14 Jun 2008 20:30:29 -0300, Janis Papanagnou
<Janis_Papanagn ou@hotmail.comw rote:

but is it possible to dynamically change the visibility attribute for all
<tdelements 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 <tdtags then: getElementsByTa gName("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