Hide all elements of a specific class

J

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

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

Janis Papanagnou

Bjoern said:
* 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 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?
 
B

Bjoern Hoehrmann

* Janis Papanagnou wrote in comp.lang.javascript:
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.
 
S

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 :
<option> A
<option> B
<option> C
</select>
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';
 
T

Tom Cole

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.

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;
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.
 
E

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 <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>
==========================================================
 
J

Janis Papanagnou

Safalra said:
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. :-}
 
J

Jonas Raoni

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top