bechte: Baumstruktur in einer Tabelle

Beitrag lesen

Hallo Stefan,

ich hab mir eben Dein Problem mal bildlich vorgestellt und mir ist spontan dieser Gedanke gekommen. Vielleicht hilft er Dir weiter.

Aber zuvor kurz eine kleine Erklärung: Bau Dir eine Tabelle und gib jeder (!!!) Reihe eine ID. Dabei wählst Du einen beliebigen Namen (hier: item) und eine fortlaufende Nummer für jedes Level. Kindreihen erhalten die ID des Vaters Plus eine eigene fortlaufende Nummerierung, die unbedingt durch ein beliebiges Zeichen getrennt sein muss (hier: l = kleines l für Level)! Zusätzlich gibst Du jedem Kind als name Attribut den Namen des Papas. ;-)

Jetzt kannst Du einfach über getElementByName die Kinder auswählen und entsprechend dem Vorgang entweder ein- oder ausblenden. Sollte dann recht einfach sein... Habs nicht gemacht, würde mir das aber in weniger als einer Stunde zutrauen... :-D

Falls Du damit eine Lösung implementierst, wäre es toll, wenn Du sie hier noch mal posten könntest. Wäre sicher interessant, auch für andere. Danke!

Schöne Grüße und viel Erfolg mit folgendem Markup:

<table>
  <tbody>
    <!-- Item 1 auf Level 1 -->
    <tr id="item1">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- Item 1 auf Level 2, Kind von id=item1
    <tr id="item1l1" name="item1">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- Item 1 auf Level 3, Kind von id=item1l1
    <tr id="item1l1l1" name="item1l1">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- Item 2 auf Level 3, Kind von id=item1l1
    <tr id="item1l1l2" name="item1l1">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- Item 2 auf Level 2, Kind von id=item1
    <tr id="item1l2" name="item1">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>

<!-- Item 2 auf Level 1 -->
    <tr id="item2">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- Item 1 auf Level 2, Kind von id=item2
    <tr id="item2l1" name="item2">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- Item 2 auf Level 2, Kind von id=item2
    <tr id="item2l2" name="item2">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>

<!-- Item 3 auf Level 1 -->
    <tr id="item3
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>

<!-- usw. -->
  </tbody>
</table>