Vise/skjule tabell-rader med JavaScript

[Mathiasman]

Hei!

 

Jeg har søkt litt rundt på nettet nå, men har mislyktes i min søken etter et skript som kan vise og skjule tabell-rader. Mer spesifikt skal jeg ha en checkbox som bestemmer om jeg skal vise eller skjule de to siste radene i en tabell.

 

Er det noen som forstår hva jeg vil frem til, og har et skript som kan hjelpe? Jeg er ikke særlig flink til annet enn html og php, så slik skripting som dette har jeg dessverre lite peiling på. Hjelp ønskes dessverre. Takk!

 

Mvh Mathias

[cbastus]

Sorter TR elementene i en array og sett style.display = 'none' på alle unntatt de to siste.

 

Eventuelt kan du gjøre det med å bytte CSS klasse på hele tabellen noe à-la:

 

<table class="on">

<tr/>

<tr/>

<tr class="notMe">

</table>

 

table.off tr {display: none;}

table.off tr.notMe {display: block;}

 

Når du nå bytter klasse på TABLE til 'off' vil CSS-en skjule alle rader unntatt de med klasse 'notME'.

 

Ikke et fungerende eksempel altså, men nå har du i alle fall noe å gå på.

Jeg ville gått for CSS løsningen da den krever mindre kode og prosessorkraft siden den ikke nytter løkker.

[norpheus]

Feks

HTML:

<table>
<thead>
</thead>
<tbody id='tabell'>
<tr>
<tr>
<tr>
</tbody></table>
<input type='checkbox' onClick='toggleRows(this)'

 

Når du klikker på checkboxen:

function toggleRows(e)
{
var tbody=document.getElementById('tbody');
var tr=tbody.rows;
var display='none';
if(e.checked)
display='';
rows[tr.length-1].style.display=display;
rows[tr.length-2].style.display=display;
}

Jeg tror dette burde funke greit, poenget er å kjøre en funksjon når checkbox klikkes på og deretter hente ut alle radene i tabellen.

Basert på checkbox.checked variablen setter du display til '' eller 'none'.