TreeTable: HTML-Tabellen mit Baumstruktur

HTML-Tabellen mit vielen Zeilen sind unangenehm zu nutzen, auch wenn der Browser auf aktuellen Rechnern gut damit zurechtkommt.

Wenn die Daten selbst hierarchisch strukturiert sind, kann man dies durch Aufklappen und Einklappen von Unterbereichen abbilden: die Tabelle wird übersichtlicher, wenn sie nur das zeigt, was mich interessiert.

Man kann das implementieren, indem man mit einer kurzen Basis-Tabelle startet und Unterbereiche erst unmittelbar beim Aufklappen nachlädt. Das Nachladen von Tabellen-Abschnitten braucht aber Unterstützung durch den Server.

Das hier vorgestellte kleine JavaScript kommt ohne Unterstützung durch den Server aus und lässt sich mit geringem Aufwand an bereits bestehende Tabellen andocken.

Hier eine Beispieltabelle (klicken Sie auf die Dreiecke):

Name … … … …
A… … … … …
B… … … … …
C… … … … …
D… … … … …
E… … … … …
F… … … … …
G… … … … …
H… … … … …
I… … … … …
Beispiel-Tabelle

Und so wird's gemacht:

  1. Im Kopf der Seite werden die Skript-Datei treetable.js sowie das zugehörige Style-Sheet treetable.css eingebunden.
  2. Die Tabellen, die eine Baumstruktur bekommen sollen, werden (auch) der Klasse treetable zugewiesen; dadurch werden die Style-Regeln aus treetable.css angewendet und kann sich das Skript andocken.
    <table class="treetable">
  3. Die Hierarchie-Ebene n jeder Zeile wird im <tr>-Element als Klasse “cn” angegeben: jede Zeile wird damit zum Unterpunkt der letzen vorausgehenden Zeile mit kleinerer Ebene.

    Hört sich komplizierter an als es ist. Die Beispieltabelle von oben schaut so aus:

    <table class="treetable">
    <tbody>
    <tr class="c0"> <td>A…</td> … … … </tr>
    <tr class="c1"> <td>B…</td> … … … </tr>
    <tr class="c2"> <td>C…</td> … … … </tr>
    <tr class="c2"> <td>D…</td> … … … </tr>
    <tr class="c1"> <td>E…</td> … … … </tr>
    <tr class="c2"> <td>F…</td> … … … </tr>
    <tr class="c3"> <td>G…</td> … … … </tr>
    <tr class="c3"> <td>H…</td> … … … </tr>
    <tr class="c2"> <td>I…</td> … … … </tr>
    […]
    </tbody>
    
    </table>
    
    • A ist das Wurzelelement,
    • B und E sind Unterpunkte von A,
    • C und D sind Unterpunkte von B,
    • F und I sind Unterpunkte von E,
    • G und H sind Unterpunkte von F.
  4. Beim Laden der Seite wird der TreeTable-Mechanismus automatisch auf alle Tabellen der Klasse treetable angewandt.

Das war's schon.

Als größeres Beispiel gibt es die Liste der deutschen Gebietskörperschaften mit rund 11.000 Zeilen.

WTFPL

Sie können Skript und Stylesheet zusammen mit zwei Beispielseiten als Archiv-Datei treetable.zip herunterladen.