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"elements 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:visible; }
.B { visibility:hidden; }
...
</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.<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

[Bjoern Hoehrmann]

* 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 <tdelements 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
<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:bj****@hoehrmann.de · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: [phone] · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/

[Janis Papanagnou]

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

[Bjoern Hoehrmann]

* Janis Papanagnou wrote in comp.lang.javascript:

>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:visible; }
.B { visibility:hidden; }
...
</style>

to the document using methods like createElement and appendChild.
--
Björn Höhrmann · mailto:bj****@hoehrmann.de · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: [phone] · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/

[SAM]

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.selectedIndex;
if(k!=0) document.getElementById('tabl').className = C[k-1];">
<option>Hide td of class :
<optionA
<optionB
<optionC
</select>
<input type = reset onclick="document.getElementById('tabl').className ='';">
</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.getElementById('tabl').className='A';

--
sm

[Tom Cole]

On Jun 14, 7:30*pm, Janis Papanagnou <[e-mail]>
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 <tdelements 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
<tdelements 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.

[Evertjan.]

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 <tdelements 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 <tdelements 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)

[Janis Papanagnou]

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

[Safalra (Stephen Morley)]

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]

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]

On Sat, 14 Jun 2008 20:30:29 -0300, Janis Papanagnou
<Ja**************@hotmail.comwrote:

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: 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