[Javascript] Klappen funktioniert nicht

[cyberkuh]

Hallo,

warum funktioniert folgendes kleine Script nicht?

<script language="javascript">
function toggle(control) {
	var elem = document.getElementById(control);
	if(elem.style.display == "none") {
		elem.style.display = "block";
	}
	else {
		elem.style.display = "none";
	}
}
</script>

<table>
<tr>
<td><a href="javascript:toggle('bla')">Zeilen klappen!</a></td>
</tr>

<div id="bla" style="display:block">
<tr>
<td>Zeile 1</td>
</tr>
<tr>
<td>Zeile 2</td>
</tr>
</div>

</table>

Damit will ich beim einem Klick "Zeilen klappen!" die Zeilen im Div-Container ausblenden und mit einem weiteren Klick wieder einblenden.

Liebe Grüße und einen schönen Sonntag
Benny

 

[theHacker]

Der Validator verrät dir warum: In <table> sind keine <div>-Elemente erlaubt.

Damit das funktioniert, dass eine Zeile ausgeblendet wird, musst du auch die Zeile (table-row) ansprechen und hier mit der display-Eigenschaft rumspielen.

Kleiner Hinweis:
Der IE interpretiert

tr {
  display: table-row;
}

nicht. Du musst, wenn du die Zeile wieder einblendest, für IE-Browser die JavaScript-Eigenschaft elem.style.display einfach auf den leeren String setzen, dann funktioniert es trotzdem.

 

[cyberkuh]

Erstmal vielen Dank =)

Warum es nicht funktioniert habe ich jetzt verstanden.

Gut ok...ich kann zwar direkt die Zeile ansprechen mit

<tr id="bla" style="display:block">

Aber ich will ja auf einmal direkt mehrere Zeilen ausbleden und wenn ich 2 Zeilen mit id="bla" style="display:block" versehe funktionierts leider nicht.

Wie meintest du das denn genau?

 

[theHacker]

Aber ich will ja auf einmal direkt mehrere Zeilen ausbleden und wenn ich 2 Zeilen mit id="bla" style="display:block" versehe funktionierts leider nicht.

Ja gut, eine ID kann nur einmal benutzt werden.

Wie viele Zeilen sind es denn ?
Wenn es immer konstant viele, dann gib jeder eine ID - obwohl das nicht besonders toll is.
Wenn du alle Zeilen (oder alle bis auf eine oder zwei) ausblenden willst, dann würde ich eher der Tabelle die ID geben und dich dann durch den DOM-Tree durcharbeiten.

 

[cyberkuh]

Leider sind es immer verschiedene Anzahlen von Reihen.
Reichen von 2 bis zu 50 Reihen.

Das Programm oben ist ja nur aus meinem Programmtext rausgenommen und vereinfacht ;-)


Also du würdest vorschlagen, eine eigene Tabelle für diese Zeilen zu eröffnen und dieser dann die ID zuzuweisen...habe ich das so richtig verstanden?

Gibts denn keine Möglichkeit irgendwie mehrere Zeilen auf einmal auszublenden?
Div ist nicht erlaubt, Span auch nicht...gibts denn nichts was innerhalb von Tabellen dort erlaubt ist?

Liebe Grüße
Benny

 

[ice-breaker]

du könntest über klassen die tablerows rausfinden, also mit $$('#ausblenden'), alle zum ausblenden laden und danach mit hide() oder show() anzeigen/ausblenden

 

[cyberkuh]

gibts irgendwo davon schon nen Demoscript?

Denn Javascript kann ich fast überhaupt nicht...

...dass was man oben in meinem Script sieht ist schon sozusagen das höchste der Gefühle^^

 

[cyberkuh]

Habe soeben von einem befreundeten Programmierer eine Superlösung bekommen ;-)

Hier kann zu


Trotzdem Danke =) =)

 

[theHacker]

Habe soeben von einem befreundeten Programmierer eine Superlösung bekommen ;-)

Und wieso kriegen wir diese Superlösung dann nicht auch ?

 

[wahnsinn]

Auch wenn du schon eine Lösung hast, hier meine Variante für alle, die auch nach sowas suchen:

<table>
	<tbody id="hideAndShow">
		<tr>...</tr>
		<tr>...</tr>
		<tr>...</tr>
	</tbody>
</table>

Und dann mit Javascript:

// weg damit
document.getElementById('hideAndShow').style.display = 'none';
// und wieder her damit
document.getElementById('hideAndShow').style.display = ''; // leerer String