[dHTML] Cellen verbergen/weergeven

[r0bert]

Ik heb (schematisch) het volgende HTMLcodetje:

PHP:

<table>
   <tr>
       <td colspan="2">Item 1</td>
   </tr>
   <tr>
        <td>Sub</td><td> 1</td>
   </tr>
   <tr>
        <td>Onderverdeling</td><td> 2</td>
   </tr>
   <tr>
        <td>Whatever</td><td> 3</td>
   <tr>
       <td colspan="2">NogEenItem 2</td>
   </tr>
   <tr>
        <td>Dit</td><td> a</td>
   </tr>
   <tr>
        <td>Dit</td><td> b</td>
   </tr>
</table>

Nu wil ik dat als je op Item 1 of NogEenItem 2 klikt, de cellen eronder tot het volgende item verborgen/weergegeven worden. Dus vb:
_{na klikken op Item 1}

PHP:

Item 1
Item 2
Dit a
Dit b

> _{na klikken op Item 2}

PHP:

Item 1
Item 2

> _{na klikken op Item 1}

PHP:

Item 1
Sub 1
Onderverdeling 2
Whatever 3
Item 2

Iemand een idee hoe ik dit het beste kan doen ?

[Bosmonster]

Hoe je dat het BESTE kan doen?

Geen tables gebruiken, maar divs

en dan display switchen van block naar none

Jouw td's hebben namelijk geen enkele onderlinge relatie op deze manier (geen 'nesting').. Iets wat je met div's wel kunt bereiken.

[Willem]

innerHTML ?

[r0bert]

Bosmonster schreef op 13 november 2002 @ 11:57:Hoe je dat het BESTE kan doen?

Geen tables gebruiken, maar divs

en dan display switchen van block naar none

Ik wil juist de td's behouden.. daar wil ik juist graag een oplossing voor vinden.

Jouw td's hebben namelijk geen enkele onderlinge relatie op deze manier (geen 'nesting').. Iets wat je met div's wel kunt bereiken.

Colspan onderscheidt de cellen iig...

edit:
colspan is op te vragen dmv obj.colSpan, hiermee kan ik dus waarschijnlijk wel uitzoeken tot hoe ver de cellen/onderverdelingen doorlopen..
Ik kan in de functie ook eventueel het aantal onderverdelingen meeparsen, omdat dat al van tevoren bekend is..

willem169 schreef op 13 november 2002 @ 11:57:
innerHTML ?

Euh.. hoe bedoel je dat

edit..
Hoe kan ik vanuit een event in Item 1, de volgende cellen aanspreken ? Ik dacht via event.srcElement.nextSibling , maar dat werkt niet

[_DeWie_]

je moet via de Dom gaan werken , parentNode heb je de ouder enz

[r0bert]

Ja.. dat weet ik.. maar dan ?

[Bosmonster]

Geef ze dan allemaal (alle tr's) ID's mee... dan kun je die in een loop op display:none zetten...

Beetje omslachtig.. heb je ook een reden om perse tables te willen gebruiken?

[André]

Of zet om de <tr>'s een <div> heen. Maar inderdaad zoals Bosmonster al zegt: waarom tables. Met <div> kun je ook complete tabellen maken.

voorbeeld: www.nobellaan.nl/astree/

[ Voor 0% gewijzigd door André op 13-11-2002 13:07 . Reden: typo ]

[Verwijderd]

Yogho schreef op 13 November 2002 @ 13:07:
voorbeeld: www.nobellaan.nl/astree/

Nice, maar hij doet het niet in Mozilla...

r0bert, waarom idd een tabel? Als je de getallen rechts mooi onder elkaar wilt uitlijnen kun je daar beter CSS voor gebruiken.

Check deze ook ff:
http://www.gazingus.org/html/menuExpandable.html
Erg mooi gestructureerde oplossing. Niet-JS browsers zien gewoon een UL (unordered list)

[r0bert]

Ik wil graag tables gebruiken omdat ik alles daar nu op gebaseerd heb met scripten, en alles anders weer om zal moeten bouwen..

Een div om de tr's heen zou een oplossing kunnen zijn, maar werked dat en is dat euh.. valid


Met een id zou ik misschien ook wel kunnen werken, bijvoorbeeld als array.. Maar wat ik eigenlijk nu graag wil weten is..


"Hoe kan ik vanuit een event in bijv Item 1, de onderliggende cel aanspreken ? Bijv dus event.srcElement.nextSibling wat niet werkt"...

[Bosmonster]

uitgaande dat je het event in de td aanroept met this, kun je de onderliggende tr vinden met:

this.parentNode.nextSibling

Als je de onclick neemt van de tr dan kun je parentNode weglaten.

Om het vollediger te maken:

PHP:

function toggleRow (ele) {
    toggleEle = ele.nextSibling;
    while (parseInt(toggleEle.children[0].colspan) != 2) { 
         toggleEle.display =  
               (toggleEle.display == "none") ? 
               "table-row" : "none";
        toggleEle = toggleEle.nextSibling;
    }
}

Geen idee of het werkt.. maar zoiets lijkt me wel aardig

edit:

Dit gaat uiteraard niet werken.. maar geeft je een oneindige loop.. momentje.. werk er ff aan

edit:

Ik kwam op bovenstaande code.. maar het werkt niet echt

Veel succes!

[r0bert]

Thanks BosMonster..

Het is objEl.colSpan (hoofdletter)
en objEl.style.display ipv objEl.display

Ik het het nu werkend.. zodra ik het een beetje netjes in elkaar heb zitten zal ik de code even posten voor de liefhebber

[edit .. ]:

obj.style.display = 'table-row'; wou niet werken, dus dat heb ik maar vervangen door block, weet alleen niet of dit wel correct is.....

M'n werkende code (aanroepen met fnSwitchRow(this) )

PHP:

function fnSwitchRow (objEl)
{
    objEl = fnGetParentEl(objEl, 'TR').nextSibling;

    while (parseInt(objEl.childNodes(0).colSpan) != 2) {
        objEl.style.display = (objEl.style.display == "none") ? "block" : "none"; 
        objEl = objEl.nextSibling; 
    }
}

function fnGetParentEl(objEl, strTagName)
{   
    while (objEl.tagName != strTagName)
    {
        if (objEl.parentNode) objEl = objEl.parentNode;
        else break;
    }
    return objEl;
}

[Bosmonster]

cool Had het ff snel ingetypt.. blij dat je er wat aan had!

[r0bert]

Joaw.. beter!

die functie fnGetParentEl() had ik al in mijn documentje en de andere functie is op zich ook heel logisch. Maar ik kon het maar niet voor elkaar krijgen om die onderliggende cel goed aan te roepen .. maar dat werrukt nu wel! * r0bert is happy

Als iemand nog verbeteringen weet of nog een bug ziet, meld plz ff!