Skip to content
giugno 21, 2009 / Davide

Tabella a righe alternate con jQuery (prima parte)

Per realizzare tabelle “zebrate”, jQuery mette a disposizione i 2 selettori ‘:odd‘ e ‘:even’.

Vediamo in dettaglio come funzionano.

‘:odd’ e ‘:even’

Prima di tutto creiamo la nostara pagina html con all’interno una normale tabella (chiameremo il file zebra.html).

zebra_html

Allo stesso file aggiungiamo i riferimenti alla libreria jQuery (rigo: 5) ed al file css (rigo: 6) nel qual ci preoccuperemo di inserire i tag per modificare il colore delle nostre righe.

Notate lo script (rigo: 8 – 12). E’ qui che si indica che al momento del caricamento della pagina  $(document).ready venga assegnata alle righe dispari ‘:odd’ (in inglese “dispari” appunto) di ogni tabella la classe ‘alt’, mentre per le altre il colore è specificato dal selettore <tr> (rigo: 2). Ricordate che javascript è un linguaggio zero-base così la prima riga avrà valore 0 la seconda 1 la terza 2 e così via….

Ovviamente potremo sostituire ‘:even‘ ad ‘:odd‘ per far assegnare la class ‘alt’ alle righe pari.

Il nostro  zebra.css sarà:

zebra_css

Infine il risultato che otterremo:

zebra

L’inconveniente di questa soluzione è che se avessimo una seconda tabella nella stessa pagina, la seconda tabella inizierebbe con una riga viola invece che gialla. Nella seconda parte di questo articolo ovvieremo al problema.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: