Tabellenzeilen ein- bzw. ausblenden

[Gunnar Bittersmann]

@@minor73:

nuqneH

Die erste Zeile ist dabei die Blcoküberschrift dar, in diesem Fall das Projekt, die darauf folgenden Zeilen sind die Aufgaben zu diesem Projekt, dargestellt in dem ich einfach in Spalte 2 anfange, mit entsprechender Gesaltung siht das dann wie eine Gruppendarstellung aus.
Dann kommt wieder Projekt und danach die Aufgaben ... usw.

Hört sich so an, dass das Markup so aussehen sollte:

<table>  
  <tbody id="projekt1">  
    <tr><th>…</th> …</tr>  
    <tr><td>…</td> …</tr>  
    <tr><td>…</td> …</tr>  
    ⋮  
  </tbody>  
  <tbody id="projekt2" class="compact">  
    <tr><th>…</th> …</tr>  
    <tr><td>…</td> …</tr>  
    <tr><td>…</td> …</tr>  
    ⋮  
  </tbody>  
  ⋮  
</table>

Im Stylesheet versteckst du alle Tabellenzeilen in 'tbody'-Elementen der Klasse "compact":

tbody.compact tr:not(:first-child) { display: none }

Schön wär’s gewesen. Nur das der IE selbst in der 8er Version mit :not() seine Not hat. Also als Zweizeiler:

tbody.compact tr { display: none }  
  
tbody.compact tr:first-child { display: table-row }

Für IE 7 zusätzlich:

  
*+html tbody.compact tr:first-child { display: block }

IE 6 ist hoffentlich irrelevant. Aber es sollte alles eingeblendet sein:

* html tbody.compact tr { display: block }

nun möchte ich eben die Zeilen mit den Aufgaben darunter ein- bzw. ausblenden, und das eben durch einen Click auf ein Ordnersymbiol oder ähnliches.

Dann ändere die Klassenzugehörigkeit des jeweiligen 'tbody'-Elements auf "" bzw. "compact".

Hmm hoff ich hab nicht zu wirr geschrieben.

Doch, hast du. Die Leserichtung ist in unserem Kulturkreis von oben nach unten; die Schreibrichtung sollte genauso sein. Kein TOFU!

Qapla'