Show/hide

[hawky]

hallo,

ik laat een tabel helemaal vullen met gegevens, maar ik heb verschillende rijen nodig per record. nu wil ik graag per record 1 rij laten zien en een knop in die rij zodat de volgende rijen getoond/gehide worden.

hoe kan ik dit het beste doen?

Groeten Brecht

 

[That Guy]

Door een referentie naar dat element te verkrijgen en dan te wisselen tussen display none en table-row.

[js]var handle = document.getElementById('mijnTabel').getElementsByTagName('tr')[1]; // 2e rij

handle.style.display = 'none'; // om terug te krijgen: 'table-row';[/js]

oid.

 

[hawky]

Ja, maar omdat ik de gegevens met PHP ophaal weet ik dus niet hoeveel rijen er per record opgehaald gaan worden. Ik was aan het denken om de rijen die verborgen moeten worden in de class het id van het record mee te geven, dan zet ik in de eerste rij een knop waardoor ik de verborgen rijen kan laten zien doordat de rijen het id hebben.

<tr class="1"><td><input type="button" value="toggle"></td></tr>
<tr class="hidden 1"><td></td></tr>
<tr class="hidden 1"><td></td></tr>
<tr class="2"><td><input type="button" value="toggle"></td></tr>
<tr class="hidden 2"><td></td></tr>

Hoe kan ik dit doen met een scriptje?
Groeten Brecht

 

[That Guy]

Ah. Nou, dat gaat zo. Eerst maak je de CSS class 'hidden' aan:

.hidden
{
   display: none;
}

Dan bouw je de HTML op zoals je dat in de vorige post deed. Echter, dubbele classe-namen in Javascript is soms een beetje vervelend, dus gaan we gewoon een ander attribuut gebruiken, name ofzo:

<table id='geval'>
<tr>
   <td>
      <button onclick='toggleTable(1);'>toggle me!</button>
   </td>
</tr>

<tr class="hidden" name='hidden1'>
   <td></td>
</tr>

<tr class="hidden" name='hidden1'>
   <td></td>
</tr>

</table>

De Javascript wordt dan zoiets:[js]function toggleTable(ids)
{
var i,
table = document.getElementById('geval'), /* de tabel */
trs = table.getElementsByName('hidden' + ids), /* alle TR elementen met de name 'hidden#' */
len = trs.length;

for(i = 0; i < len; i++)
{
trs.className = ''; // haal de 'hidden' class name weg
}
}[/js]

Als je wilt wisselen tussen de stijlen moet je bij de regel waar je de class weghaalt, eerst kijken wat de class is, als 'ie op leeg staat er hidden van maken en andersom.



:thumb:

 

[hawky]

Op een of andere manier werkt het scriptje niet. Het start wel, maar voert niet helemaal uit denk ik.
als ik in een alert het aantal tr wil laten zien, dus:

len = trs.length;
alert(len);

Doet hij niets. Wat kan hier het probleem zijn?
Groeten Brecht

 

[That Guy]

Foutenconsole (ctrl+shift+J) geeft dit:

Fout: table.getElementsByName is not a function
Bronbestand: file:///C:/Users/Gebruiker/Desktop/test.html
Regel: 25

Blijkbaar kan je niet van een element alle kinderen met een bepaalde name oproepen, maar alleen globaal...

Anyway, de makkelijke oplossing is dit
[JS]function toggleTable(ids)
{
var i,
trs = document.getElementsByName('hidden' + ids), /* alle elementen met de name 'hidden#' waar # het nummer is */
len = trs.length;

for(i = 0; i < len; i++)
{
trs.className = ''; // haal de 'hidden' class name weg
}
}[/JS]




:thumb: