in- /uitklappen tabel rows DOM-based

[Verwijderd]

Ik heb wat moeite om door middel van DOM-based scripting een bestaand tabel op bepaalde punten in- /uit te laten klappen.

De tabel heeft de volgende structuur:

code:

<table class="class1">
    <tr>
        <td class="header1"><img /></td>
    </tr>
    <tr>
        <td class="item">text1</td>
    </tr>
    <tr>
        <td class="item">text2</td>
    </tr>
    <tr>
        <td class="item">text3</td>
    </tr>
    <tr>
        <td class="header2"><img /></td>
    </tr>
    <tr>
        <td class="item">text4</td>
    </tr>
    <tr>
        <td class="item">text5</td>
    </tr>
    <tr>
        <td class="item">text6</td>
    </tr>
</table>

Bij header1 en header2 moet die content daaronder uit en inklappen. Ik heb eerlijk gezegt beperkt kennis van Javascript maar ik kan zoiets wel realiseren als ik de tabel structuur kan herschrijven en daar zit nu het probleem. Is het uberhaupt wel mogelijk? Zo ja kan iemand mij de juiste weg ophelpen. Mijn dank is groot.

[André]

Hier zijn echt al heel veel topics over geweest en je kunt helemaal niets vinden?

[frickY]

Heb je al overwogen een list te gebruiken, aangezien dit een list is en geen tabulaire data?

HTML:

<ul>
  <li class="header1">
    <img />
    <ul>
      <li class="item">text1</li>
      <li class="item">text1</li>
      <li class="item">text1</li>
    </ul>
  </li>
  <li class="header1">
    <img />
    <ul>
      <li class="item">text1</li>
      <li class="item">text1</li>
      <li class="item">text1</li>
    </ul>
  </li>
</ul>

Met een

Cascading Stylesheet:

ul li ul {
  display: none
}

kun je in ieder geval de sub'-lijsten al verbergen. Hoe ze je dan met javascript weer te voorschijn haalt kom je vast wel achter.

[ Voor 48% gewijzigd door frickY op 05-12-2005 19:36 ]

[Verwijderd]

kanttekening hierbij is dat de structuur NIET kan veranderen. De vraag is of het wel met deze structuur mogelijk is en of iemand mij op weg kan helpen.

[NetForce1]

de zoektermen visibility en display moeten je denk ik al een heel eind op weg helpen

[Verwijderd]

Verwijderd schreef op maandag 05 december 2005 @ 21:19:
kanttekening hierbij is dat de structuur NIET kan veranderen. De vraag is of het wel met deze structuur mogelijk is en of iemand mij op weg kan helpen.

Dit kan zeker, je zult door de childs van de table moeten lopen. Daarbij bepalen of het een header is of een sub en dan de display goed zetten.

Hints:
getElementsByTagName()
hasChildNodes()
etc...

linkje:
http://www.w3schools.com/dom/dom_document.asp