✔ Alle Objekte mit Id='xy' ausblenden

Kai-Behncke

Kai-Behncke

Erfahrenes Mitglied
Hallo liebes Forum,

ich siche nach einer Möglichkeit, wie ich z.B. alle
<td> Elemente mit einer bestimmten Id auf einen Klick ausblenden kann.

Konkret: Ich habe eine Tabelle in welcher 20 mal <td class='sichtbar' id='xy'> vorkommt.

Nun habe ich einen radio button, welcher auf Klick folgende Funktion aktiviert:

Code: 
function ausblenden() {

document.getElementById("xy").className = "unsichtbar";

}

Das jeweils erste <td>-Objekt wird dann auch unsichtbar, aber alle anderen bleiben sichtbar.
Hat jemand eine Ahnung wie man das umgehen kann?

Danke und schon mal einen guten Rusch;), Kai
 
Hi,

ein ID-Bezeichner (wie in deinem Fall "xy") muß innerhalb eines HTML-Dokuments eindeutig sein, darf darin also nicht mehrmals vergeben werden. Daher wird bei dir derzeit auch nur das erste td-Element im Dokumentbaum vom JS-Code angesprochen.

Wenn sich die Zellen in einer Tabelle befinden, kannst du stattdessen diese im Dokument ein- und ausblenden.

mfg Maik
 
Hi Kai,

das funktioniert nicht, da eine ID dokumentweit eindeutig sein muss. getElementById() liefert dementsprechend auch nur einen Knoten zurück.

LG

EDIT: mal wieder...:-(
 
Naja, es gäbe da schon einen Weg über CSS :)

Beispiel:
Code: 
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-01-01"  />
<title>Test</title>

<style type="text/css">
.xy_unsichtbar #xy{display:none}
</style>
</head>
<body>
<input type="button" onclick="document.getElementsByTagName('body')[0].className='xy_unsichtbar'" value="mache #xy unsichtbar" />
<div id="xy">xy</div>
<div id="xz">xz</div>
<div id="xy">xy</div>
<div id="xy">xy</div>
</body>
</html>

Es wurde eine CSS-Rule für den Selektor .xy_unsichtbar #xy erstellt.
Wenn man jetzt den Klassennamen des body auf .xy_unsichtbar ändert, kommt diese zum Greifen.

Dies lässt sich genausogut mit ohne mehrfache Verwendung einer ID umsetzen:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-01-01"  />
<title>Test</title>

<style type="text/css">
.sichtbar{display:block}
.xy_unsichtbar .xy{display:none}
</style>
</head>
<body>
<input type="button" onclick="document.getElementsByTagName('body')[0].className='xy_unsichtbar'" value="mache #xy unsichtbar" />
<div class="sichtbar xy">xy</div>
<div class="sichtbar xz">xz</div>
<div class="sichtbar xy">xy</div>
<div class="sichtbar xy">xy</div>
</body>
</html>
Alles, ohne umständlich in Schleifen Elemente durchlaufen zu Müssen.

Falls du dies in mehreren Fällen anwenden willst, könntest du die CSS-Rules über das styleSheet-Objekt sogar dynamisch erzeugen :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück