[JS] Rijen zichtbaar maken met zelfde ID

[Polderdijk]

Ik ben voor mijn site een overzicht aan het maken waarin een aantal merken van mobiele telefoons staan. Deze staan gegroepeerd onder elkaar. Nu is het de bedoeling als je op 1 van de merken klikt dat eronder alle type's van dat merk worden vertoond zonder dat de pagina opnieuw geladen wordt.

Nu haal ik alle gegevens uit een SQL database en als je deze draait dan hou je ongeveer zoiets over: (voor realtime kijk dan op http://test.jouwmobiel.com/wallpapers.asp (onderaan))

code:

<tr>
  <td><b>&nbsp;<a href="javascript:Toestellen('NEC')">+&nbsp;NEC</a></b></td>
  <td align="middle">&nbsp;</td>
  <td align="middle">&nbsp;</td>
</tr>

<tr style="display: none" ID=NEC>
  <td>&nbsp;NEC&nbsp;N31i</td>
  <td align="middle">-</td>
  <td align="middle">[img]"images/ok.gif"></td>
</tr>

<tr[/img]
  <td>&nbsp;NEC&nbsp;N341I</td>
  <td align="middle">-</td>
  <td align="middle">[img]"images/ok.gif"></td>
</tr>

<tr>
[/img]<b>&nbsp;<a href="javascript:Toestellen('Nokia')">+&nbsp;Nokia</a></b></td>
  <td align="middle">&nbsp;</td>
  <td align="middle">&nbsp;</td>
</tr>

<tr style="display: none" ID=Nokia>
  <td>&nbsp;Nokia&nbsp;1260</td>
  <td align="middle">[img]"images/ok.gif"></td>
[/img]-</td>
</tr>

<tr style="display: none" ID=Nokia>
  <td>&nbsp;Nokia&nbsp;2100</td>
  <td align="middle">[img]"images/ok.gif"></td>
[/img]-</td>
</tr>

<tr style="display: none" ID=Nokia>
  <td>&nbsp;Nokia&nbsp;2260</td>
  <td align="middle">[img]"images/ok.gif"></td>
</tr[/img]

En zoals je ziet als je op een toestelmerk drukt dat de functie Toestellen wordt aangeroepen, deze functie is het volgende:

code:

function Toestellen(Brand) {
    if(document.getElementById(Brand).style.display == "") {
        document.getElementById(Brand).style.display = "none"
    } else {
        document.getElementById(Brand).style.display = ""
    }
}

Als ik nou op een toestel klikt dan wordt alleen het eerste rij met bijbehorende ID geopend. Hoe krijg ik het nou voor elkaar dat ALLE rijen vertoond worden?

[BtM909]

1. ID's moeten altijd uniek zijn
2. getElementById geeft maar 1 element terug (waarschijnlijk de eerste

Wellicht handiger om zelf (in een array) bij te houden welke Id's bij elkaar horen ?

[crisp]

door geen id te gebruiken; een id dient uniek te zijn en getElementById geeft dus altijd maar 1 element terug.
Je zou een custom attribuut kunnen gebruiken en mbv getElementsByTagName door alle TR's kunnen lopen en dan dat custom attribuut uitvragen mbv getAttribute, en aan de hand daarvan de display property al dan niet wijzigen

[Polderdijk]

Oke, ik heb op GoT [rml][ JavaScript] For each ID item --> hide it![/rml] gevonden en ga ik ff proberen mee te spelen!

[Verwijderd]

Ik denk dat je het beste de TABLE een class kan geven en afhankelijk van die class een TR wel of niet laat zien:

HTML:

<table id="Phones">
    <tr class="Nokia">
        <td>Ding 1</td>
        <td>Ding 2</td>
        <td>Ding 3</td>
    </tr>
    <tr class="Sony">
        <td>Ding 4</td>
        <td>Ding 5</td>
        <td>Ding 6</td>
    </tr>
</table>

Cascading Stylesheet:

tr {
    /* hide alle TRs */
    display:none;
}
.Sony tr.Sony {
    /* show Sony */
    display:table-row;
}
.Nokia tr.Nokia {
    /* show Sony */
    display:table-row;
}

JavaScript:

function showRow( sTableID, sClass ) {
    document.getElementById(sTableID).className = sClass;
}
showRow('Phones', 'Nokia');

[ Voor 16% gewijzigd door Verwijderd op 02-01-2004 16:36 ]

[Polderdijk]

Oke, probleem opgelost

Ik heb elke tr de ID "Brand" + de eerste 3 letters van het merk gegeven. Nu kan ik deze met de volgende JS aanroepen:

code:

function Toestellen(Brand) {
    for(var i=0; i<document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id.substring(0,8)=="Brand" + Brand) {
            if(document.getElementsByTagName("tr")[i].style.display == "") {
                document.getElementsByTagName("tr")[i].style.display = "none"
            } else {
                document.getElementsByTagName("tr")[i].style.display = ""
            }
        }
    }
}

[creative8500]

Zo moet het niet, Polderdijk: id-attributen moeten uniek zijn, je mag niet twee keer id="brandnok" gebruiken.

[Polderdijk]

creative8500 schreef op 02 januari 2004 @ 16:38:
Zo moet het niet, Polderdijk: id-attributen moeten uniek zijn, je mag niet twee keer id="brandnok" gebruiken.

Niet op de manier waarmee ik ze nu aanroept want ik haal de id's op van elke <tr> en dan vergelijk ik ze, komen ze overeen dan doe ik er iets mee! Dus nu hoeft het niet uniek te zijn

[crisp]

Polderdijk schreef op 02 januari 2004 @ 18:49:
[...]

Niet op de manier waarmee ik ze nu aanroept want ik haal de id's op van elke <tr> en dan vergelijk ik ze, komen ze overeen dan doe ik er iets mee! Dus nu hoeft het niet uniek te zijn

Dan gebruik ik liever een custom attribuut dan ID.
Ik vind de suggestie van Blues voor dit geval ook wel een aanrader!

[Verwijderd]

crisp schreef op 02 januari 2004 @ 18:54:
Ik vind de suggestie van Blues voor dit geval ook wel een aanrader!

Waarbij uit m'n voorbeeld nog niet genoeg blijkt dat je meerdere rows met dezelfde classname kan hebben (en dus meerdere rows tegelijkertijd kan displayen/hiden):

HTML:

<table id="Phones">
    <tr class="Nokia">
        <td>Ding 1</td>
        <td>Ding 2</td>
        <td>Ding 3</td>
    </tr>
    <tr class="Sony">
        <td>Ding 4</td>
        <td>Ding 5</td>
        <td>Ding 6</td>
    </tr>
    <tr class="Sony">
        <td>Ding 7</td>
        <td>Ding 8</td>
        <td>Ding 9</td>
    </tr>
    <tr class="Sony">
        <td>Ding 10</td>
        <td>Ding 11</td>
        <td>Ding 12</td>
    </tr>
</table>

Polderdijk schreef op 02 januari 2004 @ 18:49:
Niet op de manier waarmee ik ze nu aanroept want ik haal de id's op van elke <tr> en dan vergelijk ik ze, komen ze overeen dan doe ik er iets mee! Dus nu hoeft het niet uniek te zijn

Je snapt het niet, geloof ik: het is ongeldig gebruik van het ID attribuut; dat het werkt is een tweede. Je haalt jezelf er veel ellende mee op de hals omdat het (bijvoorbeeld) nu niet gegarandeerd werkt in nieuwere browsers.

code:

function Toestellen(Brand) {
    for(var i=0; i<document.getElementsByTagName("tr").length; i++) {
        if(document.getElementsByTagName("tr")[i].id.substring(0,8)=="Brand" + Brand) {
            if(document.getElementsByTagName("tr")[i].style.display == "") {
                document.getElementsByTagName("tr")[i].style.display = "none"
            } else {
                document.getElementsByTagName("tr")[i].style.display = ""
            }
        }
    }
}

Dit is trouwens sowieso niet zo netjes: getElementsByTagName is een vrij dure methode, die kun je dus beter maar een keer doen. Nu gebruik je 'm per iteratie in je loop minstens 2 maar maximaal 4 keer!

code:

function Toestellen(Brand) {
    var aTR = document.getElementsByTagName("tr");
    for(var i=0; i<aTR.length; i++) {
        var oTR = aTR[i];
        if(oTR.id.substring(0,8)=="Brand" + Brand) {
            if(oTR.style.display == "") {
                oTR.style.display = "none"
            } else {
                oTR.style.display = ""
            }
        }
    }
}

[Polderdijk]

Oke, ik heb nog even naar jouw mogelijkheden gekeken en even beredeneerd hoe het in de toekomst moet, maar daar kom ik dan op een minpunt terecht, ook al weet ik nu dat mijn methode niet de meeste mooite methode is.

Maar elke nacht wordt mijn database geupdate met gegevens van een organistatie waarbij mijn site is aangesloten. Stel dat er een nieuw merk telefoon wordt toegevoegd, dan betekend dit dat ik mijn css file ook moet updaten. Nu hoeft dit niet omdat dit automatisch wordt meegegeven.

Of begrijp ik het nu nogsteeds verkeerd

[Verwijderd]

Polderdijk schreef op 03 januari 2004 @ 16:19:
Maar elke nacht wordt mijn database geupdate met gegevens van een organistatie waarbij mijn site is aangesloten. Stel dat er een nieuw merk telefoon wordt toegevoegd, dan betekend dit dat ik mijn css file ook moet updaten. Nu hoeft dit niet omdat dit automatisch wordt meegegeven.

Da's inderdaad een nadeel, maar je kunt de CSS natuurlijk ook in de HTML zelf toevoegen als STYLE tag in de HEAD. Zo hou je de CSS en de data automatisch synchroon.

[Verwijderd]

Ik zie nog niet precies in wat voor informatie je wilt groeperen met ID attributen?! Maar HTML heeft een grote variatie aan attributen voor de vaak misbruikte tabellen, wellicht dat het 'axis' attribuut je hier kan helpen: http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.4.2

[Verwijderd]

Misschien dat ik er wel helemaal naast zit maar...
Waarom zorg je er niet voor dat je de ID's genereert vanuit de database, dus het div-je met het merk als id en de toestellen met merk+(uniek record id van het toestel)?

Dan kan je toch selecteren op de namen van de div-jes?

[Verwijderd]

Verwijderd schreef op 04 januari 2004 @ 11:31:
Misschien dat ik er wel helemaal naast zit maar...
Waarom zorg je er niet voor dat je de ID's genereert vanuit de database, dus het div-je met het merk als id en de toestellen met merk+(uniek record id van het toestel)?

Dan kan je toch selecteren op de namen van de div-jes?

Omdat er meerdere TRs zijn die tegelijkertijd moeten verschijnen en verdwijnen. Als je daar unieke IDs voor gebruikt moet je ze ook individueel manipuleren -- en da's niet echt handig.

Overigens: zou het gebruik van TBODY hier niet goed werken? Dus i.p.v. de TRs een (niet-uniek) ID te geven er een TBODY omheen zetten met dat ID?

HTML:

<table id="Phones">

    <tbody id="Nokia">
        <tr>
            <td>Ding 1</td>
            <td>Ding 2</td>
            <td>Ding 3</td>
        </tr>
    </tbody>

    <tbody id="Sony">
        <tr>
            <td>Ding 4</td>
            <td>Ding 5</td>
            <td>Ding 6</td>
        </tr>
        <tr>
            <td>Ding 7</td>
            <td>Ding 8</td>
            <td>Ding 9</td>
        </tr>
        <tr>
            <td>Ding 10</td>
            <td>Ding 11</td>
            <td>Ding 12</td>
        </tr>
    </tbody>

</table>

Dit is volgens mij de perfecte oplossing voor jou omdat TBODYs bedoeld zijn om TRs te groeperen.

Zie W3C voor meer info over het TBODY element.

[Polderdijk]

@Blues:

Ik denk dat de TBODY perfect voor mijn probleem zal zijn. Ik zal het vanavond gaan proberen en laat het hier even weten of het lukt (of niet).

Ik neem aan dat ik deze ook aan kan roepen dmv getElementsByTagName("tbody")?

[Verwijderd]

Je krijgt dan een Nodeset terug, geen Node. Denk daaraan.

[Polderdijk]

Ik heb het net even geprobeerd en het werkt perfect, en een stuk sneller dan mijn andere methode! De javascript is nauwelijk veranderd, je met alleen de "tr" vervangen door "tbody"!