473,842 Members | 1,382 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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"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
Jun 27 '08 #1
10 3146
* 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:bj****@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/
Jun 27 '08 #2
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
Jun 27 '08 #3
* 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:bj****@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/
Jun 27 '08 #4
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.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
Jun 27 '08 #5
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.<what ever("A")>.visi bility = 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.
Jun 27 '08 #6
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)
Jun 27 '08 #7
Thanks to all for your suggestions; they are very helpful! :-)
--
Janis
Jun 27 '08 #8
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/
Jun 27 '08 #9
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
Jun 27 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
33494
by: Wang, Jay | last post by:
I try to group several rows in a table into a div and show/hide them by click on a button somewhere with a javascript link. When clicked, the link will toggle the style of the div section's style between BLOCK and NONE. This technique works on normal text fine, but it doesn't work on part of the table, is there a solution that I can achieve the goal of turning on/off several rows all together? Thanks.
2
12195
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow { display: none; }
4
8015
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers) document.layers.visibility = 'visible'; else if (document.all) { document.all.style.visibility = 'visible';
1
16767
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the div information. I want a nested show hide element though. So when you click on "Do you have carpets to be cleaned?" Small Rooms & Medium Rooms appears (that I got working) But Then when you click on Small rooms or medium rooms i want the three lines...
5
8445
by: ali | last post by:
Hello every one i need you help regarding div hide and show. i am having a link like <a href="#" onClick="expandWin()">show/hide </a> <div id=showHide> </div> within div i have lots of form tags and div elements say n. The problem
2
2532
by: rickl2790 | last post by:
Hi All I am putting a form together and I need to be able to hide or display elements of the form based on what is selected with a select. The form is a passenger details entry form and the number of passenger entry elements depends on what was selected in a select. The HTML is as follows <tr> <td width="124"><span class="sectorlabel"> Number of Adults </span> </td> <td colspan="3"><span class="sectorbox">
15
3815
by: worked | last post by:
I have a script that hides / shows form elements, and wrapped in a tab script (tab navigation). When the code is duplicated (per tab content), the hide / show function works for the first tab but breaks in each subsequent tab. Why? Help appreciated! Example: http://geocities.com/edmurphy21/ hide / show script: <script type="text/javascript"> function showHide() { var idx = this.id.split('-'); var sp =...
10
2502
by: Paolo | last post by:
Hi at all I'ld want to hide a tag during display on screen and I want to show the tag when I print the page. I try: <td style="display:none"> or
0
10796
Debadatta Mishra
by: Debadatta Mishra | last post by:
Introduction In this article I will provide you an approach to manipulate an image file. This article gives you an insight into some tricks in java so that you can conceal sensitive information inside an image, hide your complete image as text ,search for a particular image inside a directory, minimize the size of the image. However this is not a new concept, there is a concept called Steganography which enables to conceal your secret...
0
9876
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10618
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10683
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10320
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9459
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7862
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7045
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4506
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4096
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.