[JS] Table Rows verbergen

[kleautviool]

Ik ben nu bezig met een forum, en hiervoor wil ik op de voorpagina alle fora onder een bepaalde catagorie ververgen. Ik heb nu dus zo’n soort HTML

HTML:

<table>
    <thead></thead>
    <tfoot></tfoot>
    <tbody>
        <tr id="first"><th><a href="#" onclick="open('first')" colspan="6">Forum</a></th></tr>
        <tr><td>#</td> <td>#</td> <td>#</td> <td>#</td> <td>#</td> <td>#</td></tr>
        <tr><td>#</td> <td>#</td> <td>#</td> <td>#</td> <td>#</td> <td>#</td></tr>
    </tbody>
    <tbody>
         <tr id="second"><th><a href="#" onclick="open('second')" colspan="6">Forum</a></th></tr>
        <tr><td>#</td> <td>#</td> <td>#</td> <td>#</td> <td>#</td> <td>#</td></tr>
        <tr><td>#</td> <td>#</td> <td>#</td> <td>#</td> <td>#</td> <td>#</td></tr>
    </tbody>
</table>

Nu wil ik dat als er op Forum geklikt wordt, dat dan alle onderliggende <tr>’s binnen die catagorie op display: none; worden gezet. Ik heb momenteel deze functie, maar ik loop vast, omdat ik geen idee heb hoe ik de volgende <tr> te pakken krijg.

JavaScript:

function open(startNode)  {
    var startNode = document.getElementById(startNode);
    if(startNode.nodeName == "tr")  {
        for(var i=0; i<startNode.childNodes.length; i++)  {
            alert(startNode.childNodes[i].nodeName);
        }
    }
 

Met deze pak ik alleen de text- en de <th> nodes in de eerste <tr> (De startNode dus). Hoe kan ik nu alle onderliggende <tr> die onder de catagorie vallen op display:none zetten. Ik zat te denken in de richting van een while-loop die kijkt of het volgende element een </tbody> is. Zolang dit niet zo is, worden alle volgende elementen op display: none; gezet. Alleen heb ik geen idee hoe ik dit toe zou moeten passen. Ik ben niet zo’n javascript-held, maar ik dacht dat ik met nextSibling misschien iets kom berijken, maar het lukte toch niet

Ik heb al met google en de GoT-search gezocht, maar niet echt iets bruikbaars kunnen vinden. Ook heb ik op verscheidene sites gezocht naar DOM-methods, maar niks bruikbaars kunnen vinden.

Misschien dat iemand mij een beetje op weg kan helpen?

[Bosmonster]

Je kunt door de childNodes van de tbody heen lopen of je kunt via nextSibling de volgende TR opvragen.

Oftewel.. je gebruikt nu alleen children, maar je hebt ook parents en siblings

[ Voor 30% gewijzigd door Bosmonster op 09-05-2004 12:44 ]

[crisp]

precies hetzelfde mechaniek gebruik ik voor de categorieen in de nieuwe GoT-template; vanuit het plus/min plaatje zoek ik de tbody op en hide daarbinnen alle tr's op de 1e na:

JavaScript:

function toggle_fieldsetdisplay(img)
{
    var table = img.parentNode, display;

    if (img.src == fclosed.src)
    {
        img.src =  fopen.src;
        display = ''
        if (typeof klipklapcookie[img.id] != 'undefined')
            delete klipklapcookie[img.id];
    }
    else if (img.src == fopen.src)
    {
        img.src = fclosed.src;
        display = 'none'
        klipklapcookie[img.id] = 1;
    }

    while ( table.tagName.toLowerCase() != 'tbody' && table != document )
        table = table.parentNode;
    if (table == document)
        return;

    var rowcollection = table.rows, i = rowcollection.length;

    while (--i)
        rowcollection[i].style.display = display;

    if (!skipcookie)
    {
        var temp = [], i = 0;
        for (var category in klipklapcookie)
            temp[i++] = category;

        SetCookie('klipklapcookie', temp.join(','));
    }
}

[kleautviool]

w00t!!! T Werkt!
Ik hebem nu zo:

JavaScript:

function showforums(startNode)  {
    var table = startNode.parentNode;
    while(table.tagName.toLowerCase() != "tbody" && table != document)  {
        table = table.parentNode;
    }
    var rowcollection = table.rows, i = rowcollection.length;
    while(--i)  {
        rowcollection[i].style.display = rowcollection[i].style.display == 'none' ? '' : 'none';
    }
}

Erg bedankt!!

[ Voor 11% gewijzigd door kleautviool op 09-05-2004 13:36 ]

[crisp]

note dat de --i een slimmigheidje is waardoor de 1e row wordt overgeslagen