Tabellenzeilen ein- bzw. ausblenden

[Gunnar Bittersmann]

@@minor73:

nuqneH

Hallo an alle,
ich habe schon in eineigen Beiträgen gelsesen das es möglich ist eine Tabellenzeile via Javascript ein- bzw. auszublenden.
habe das auch versucht und es geht auch einwandfrei mittels :

document.getElementById(2).style.display = 'none';
bzw.
document.getElementById(2).style.display = 'block';

Du testest im nur IE? Das ist grundverkehrt. Teste in standardkonformen Browsern! Danach testest du im IE, um ggfs. notwendige Anpassungen zu ergänzen.

Von „geht auch einwandfrei“ kann bei deinem Code keine Rede sein. Die 'display'-Eigenschaft einer Tabellenzeile auf "block" zu setzen ist falsch; damit zerhaust du die Tabelle.

Der richtige Wert wäre "table-row", den versteht zwar der IE < 8 nicht, wendet dann aber seinen Defaultwert ("block") an und stellt die Tabellenzeile dar.

Du kannst aber auch für alle Browser ihren Defaultwert per Leerstring angeben: ….style.display = "";

Die drei Punkte sind gewollt, denn document.getElementById(2) ist falsch; solch eine ID "2" darf es gar nicht geben [in: HTML401 §6.2] Wenn es doch funktionier, dann dank der Fehlerkorrektur der (einiger?) Browser. Verlassen sollte man sich nicht darauf.

Ich bräuchte jetzt aber eine Steigerung, ich möchte mehrere Zeilen ein- bzw. ausblenden, nur kann ja nur eine Zeile die gleiche id haben und nicht mehrere.

Diese Zeilen haben also etwas Gemeinsames, was sich durch die Zugehörigkeit zur selben Klasse ausdrücken lässt.

Die Umschaltung der Sichtbarkeit erfolgt sinnvollerweise per Änderung der Klasse eines Vorfahrenelements ('table' dürfte sich anbieten) und CSS-Nachfahrenselektor:

Markup:

<table class="hide-foo">  
  <tr class="foo">…</tr>  
  <tr class="foo">…</tr>  
  <tr class="bar">…</tr>  
  <tr class="bar">…</tr>  
</table>

Stylesheet:
.hide-foo .foo, .hide-bar .bar { display: none }

Die Tabellenzeilen der Klasse "foo" werden nicht angezeigt. Wird nun mit JavaScript die Klasse der Tabelle auf "hide-bar" geändert, werden die Tabellenzeilen der Klasse "foo" angezeigt; die Tabellenzeilen der Klasse "bar" jedoch nicht mehr.

Qapla'