Alle td mit bestimmer Class / ID auswählen - aber wie?
Chris
- javascript
Hallo,
ich habe ein DOM Problem - und muss gleicih sagen, dass ich in diesem BEreich noch Anfänger bin, und es wohl einfach nicht schaffe, die Infos aus SELFHTML richtig zusammenzubringen, oder ich habe noch einen Denkfehler :-|
Zum Problem: Ich habe eine Tabelle mit variabler Anzahl von Spalten und Zeilen. Die Spalten sollen immer in 3er-Gruppen gruppiert werden, so dass nur eine Gruppe (=3 Spalten) angezeigt werden und die anderen per JavaScript ausgeblendet werden. Per Buttons werden dann jeweils die anderen Gruppen ein- und ausgeblendet.
Ich habe nun schon verschiedene Methoden probiert, aber bisher nicht den gewünschten Erfolg gehabt:
Ein Absuchen des DOM / Node-Trees habe ich versucht, aber mit den Ergebnissen und dem gezielten Ansteuernd dieser Tabelle bzw. der <td>s darin hab ich noch Probleme, aber ich denke ich muss es auch nicht so machen.
Eine andere Variante wäre, alle <td>s automatisch abzusuchen und zu überprüfen, ob sie den entsprechenden Namen / Class haben - aber wie?
Über eine ID geht es nicht,
var elem = document.getElementById("Group01");
alert ("elem:" + elem + " Laenge: " + elem.length);
for(i = elem.length-1; i >= 0; i--)
....
ich bekomme hier immer nur ein Element zurück.
Aber wie kann ich einem Script angeben, alle <td> abzusuchen? Am liebsten wäre mir auch eine Sucheinschränkung, da ich dabei sichtbare Veränderungen beim Darstellen im Browser vermute (Performanceprobleme (?))
Hat jemand einen Tipp oder einen Link zu einer guten Seite??
Bin für jede Antwort sehr dankbar !!!
Chris
PS: Ich hoffe der längere Text hat nicht abgeschreckt, wollte es lieber ausfühlrich beschreiben
hi,
Über eine ID geht es nicht, [...]
ich bekomme hier immer nur ein Element zurück.
Da die ID dokumentweit eindeutig zu sein hat, wäre dieses Verhalten das einzig richtig.
Wenn du sie mehrmals im Dokument vergeben hättest, wäre das ein Fehler.
Aber wie kann ich einem Script angeben, alle <td> abzusuchen?
Zum Beispiel per getElementsByTagName().
(Alternativ bei Tabellenzeilen auch über rows.)
Am liebsten wäre mir auch eine Sucheinschränkung, da ich dabei sichtbare Veränderungen beim Darstellen im Browser vermute (Performanceprobleme (?))
Einschränkung auf was?
getElementsByTagName ist als Methode sämtlicher Nodes aufrufbar - also bspw. auch "unterhalb" einer bestimmten Tabelle o.ä.
gruß,
wahsaga
Hallo Chris!
Aber wie kann ich einem Script angeben, alle <td> abzusuchen? Am liebsten wäre mir auch eine Sucheinschränkung, da ich dabei sichtbare Veränderungen beim Darstellen im Browser vermute (Performanceprobleme (?))
Wenn du schon getElementById in SELFHTML gefunden hast, da bist Du nicht weit von einem seiner Brüder getElementsByTagName. Damit kannst Du schon mal alle <td> ermitteln:
zellen = getElementsByTagName('td');
Wenn sie in Klassen gruppiert sind, kannst Du das dann in einer Schleife so abfragen:
if (zellen[i].className == 'deine_klasse') ...
PS: Ich hoffe der längere Text hat nicht abgeschreckt, wollte es lieber ausfühlrich beschreiben
Besser zu viel Infos als der Griff zur Glaskugel, der führt selten zu was.
Viele Grüße aus Frankfurt/Main,
Patrick
Hi Patrick,
Wenn du schon getElementById in SELFHTML gefunden hast, da bist Du nicht weit von einem seiner Brüder getElementsByTagName. Damit kannst Du schon mal alle <td> ermitteln:
zellen = getElementsByTagName('td');
Wenn sie in Klassen gruppiert sind, kannst Du das dann in einer Schleife so abfragen:
if (zellen[i].className == 'deine_klasse') ...
Jaa - das klingt super !! Danke :)
DAS war z.B. schon mein erstes Problem: Ich wußte nicht, dass zellen = getElementsByTagName('td'); automatisch alle <td>s absucht in in ein Array schreibt :-/
Nochmals DANKE für die schnelle Hilfe, werd ich sofort mal ausprobieren !!
Besser zu viel Infos als der Griff zur Glaskugel, der führt selten zu was.
Viele Grüße aus Frankfurt/Main,
Patrick
Ja, sehe ich auch so ;)
Dann Grüße von Frankfurt nach Frankfurt *g*
Chris
Hi Patrick,
hat alles wunderbar geklappt !!!
Danke :-)
Nun hab ich ein anderes Problem: Ausblenden kann ich die <td>s ohne Probleme mit "display:none", jedoch nicht wieder einblenden, ohne dass es mir das Layout zerreisst: "display:block" erzeugt natürlich aus jeder <td> Blockelemente, die einen eigenen Umbruch haben.
Und "display:inline" reiht die Tabellenelemente nebeneinander auf :-(
Hat sowas schonmal jemand gelöst?
Gruß
Chris
Hello out there!
Nun hab ich ein anderes Problem: Ausblenden kann ich die <td>s ohne Probleme mit "display:none", jedoch nicht wieder einblenden, ohne dass es mir das Layout zerreisst: "display:block" erzeugt natürlich aus jeder <td> Blockelemente, die einen eigenen Umbruch haben.
Und "display:inline" reiht die Tabellenelemente nebeneinander auf :-(Hat sowas schonmal jemand gelöst?
IIRC einen Leerstring als Wert zuweisen.
See ya up the road,
Gunnar
Hi Gunnar,
IIRC einen Leerstring als Wert zuweisen.
See ya up the road,
Gunnar
Du meinst so: "display:' '" ??
Das hat leider nicht geklappt :(
Gruß
Chris
Hello out there!
IIRC einen Leerstring als Wert zuweisen.
Du meinst so: "display:' '" ??
Nicht Leer_zeichen_, sondern Leer_string_.
Und ich meinte eher JavaScript (du nicht auch?): foo.style.display = "";
See ya up the road,
Gunnar
Hi,
Nicht Leer_zeichen_, sondern Leer_string_.
OK danke, ja so klappt's jetzt ;)
Chris
Hi,
Nun hab ich ein anderes Problem: Ausblenden kann ich die <td>s ohne Probleme mit "display:none", jedoch nicht wieder einblenden, ohne dass es mir das Layout zerreisst: "display:block" erzeugt natürlich aus jeder <td> Blockelemente, die einen eigenen Umbruch haben.
Und "display:inline" reiht die Tabellenelemente nebeneinander auf :-(
Korrekt wäre für eine Tabellenzelle table-cell. Aber der IE versteht das nicht, also einfach einen Leerstring zuweisen, wie Gunnar ja schon schrieb.
cu,
Andreas