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?
Click to expand...

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.
Click to expand...

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.
Click to expand...

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_?
Click to expand...

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?
Click to expand...

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.
Click to expand...

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.
Click to expand...

========================================================
<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.
Click to expand...

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).
Click to expand...

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?
Click to expand...

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

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions 0
How do I hide the modal after 5 seconds? 4
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
How can I hide a div using an event listener on multiple checkboxes? 6
Sort by number of characters 1
Impossible carved cubes (1 line of html, 3 elements of css) WOW! 1
Only one table shows up with the information 2

Members online

Total: 59 (members: 2, guests: 57)
Robots: 404

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top