nicht angemeldet
Guten Tag zusammen,
ich möchte gerne in einer Tabelle eine 3 Ebene tiefe Baumstruktur abbilden. Jede Tabellenzeile enthält mehrere Zellen, in der ersten soll die Baumstruktur verdeutlicht werden. Durch das Einrücken des Textes mit Hilfe von CSS sieht das ganze dann auch schön baumartig aus. Allerdings möchte ich, dass beim Klick auf einen Vaterpunkt die Kinder ein- bzw. ausgeblendet werden können. Hier mal als Verdeutlichung der Aufbau:
-------------------------------------------------------------
Punkt 1 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
-Punkt 1.1 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
--Punkt 1.1.1 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
--Punkt 1.1.2 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
-Punkt 1.2 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
--Punkt 1.2.1 | Eigenschaft 1 | Eigenschaft 2 | Eigenschaft 3
Meine erste Idee war, alle Kinder eines Vaters in einem TBODY-Tag zu gruppieren und dieses mit display:block/none anzuzeigen bzw auszublenden.
Da ich mehrere Ebenen habe, müsste ich diese Tags dann leider ineinander verschachteln, was leider nicht mehr funktioniert.
Ich habe das ganze anschliessend mit verschachtelten DIVs versucht, das Problem ist hierbei aber, dass nicht das breiteste DIV (aufgrund des Inhalts) die Breite der Spalte bestimmt, sondern jede Zeile unterschiedlich breite DIVs aufweist. Auch das handhaben der DIVs war sehr viel schwieriger als mit einer Tabelle.
Aus diesem Grund habe ich diese Möglichkeit wieder verworfen und bin zurück zur Tabelle (welche in diesem Einsatz auch richtig wäre, es ist ein tabellarische Ansicht).
Nun könnte ich mittels JavaScript natürlich jeden Ast durchlaufen und einzeln ein- oder ausblenden, schön finde ich das aber auch nicht.
Kann mir jemand einen Tip geben, wie ich das noch realisieren könnte?
MFG
Stefan