Skip to content
giugno 28, 2009 / Davide

Tabella a righe alternate con jQuery (seconda parte)

Nello scorso articolo eravamo rimasti al problema di avere due tabelle nella stessa pagina, ed al fatto che queste si sarebbero colorate in modo differente se avessimo utilizzato la nostra soluzione.

primo_esempio_2_tabelle

JQuery ci mette a disposizione il tag ‘nt-child(:odd/:even)’ grazie al quale è possibile risolvere l’inconveniente.

Il nuovo script sarà quindi:

tabelle_zebra_script_secondo_esempio

Ricordatevi che il tag nt-child è l’unico in jQuery one-based, ovvero conta gli elementi partendo da 1 e non da 0, come invece fanno ‘:odd’ o ‘:even’.

Il risultato sarà:

secondo_esempio_2_tabelle

Altri 2 tag che potrebbero risultare utili nella formattazione di una tabella sono ‘:eq(n)’ e ‘:contains(xxx)’.

Il loro funzionamento e molto semplice.

Con ‘:eq(n)’ si va ad indicare allo script, la riga alla quale deve essere apportata la modfica voluta, per esempio quella alla quale vogliamo aggiungere uno specifico stile. Tenete sempre a mente che javascript e zero-besed quindi se vorremo assegnare una certa classe alla prima riga della tabella dovremo scrivere:

eq

Per selezionare la seconda riga avremmo dovuto impostare ‘:eq(1)’ e così via…

L’utilizzo di ‘:contains()’ è altrettanto banale, infatti utilizzandolo si va ad indicare a jQuery che deve andare a “toccare” solo quelle celle che contengono una determinata stringa o valore.

contains


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: