Questo script è un esempio di cosa sia possibile ottenere in maniera semplice e veloce grazie all'integrazione tra CSS e DOM/JavaScript. L'effetto finale è quello di ottenere tabelle di dati che presentano righe con colori alternati. Un ausilio visivo che aiuta la consultazione realizzato senza dover intervenire pesantamente sul codice HTML.
Lo stesso risultato, infatti, può essere raggiunto operando sul colore di sfondo delle singole <tr> (table rows) della tabella, utilizzando attributi e tag di HTML (metodo fortemente sconsigliato) oppure i fogli di stile. In entrambi i casi si ha lo svantaggio enorme di dover mettere mano al codice HTML nel caso di cambiamenti, aggiunte di nuove righe e via di seguito.
- esempio.htm
## 1: LA SEZIONE head
All'interno della sezione head, troviamo due parti fondamentali. La prima è una semplice riga di CSS. Analizziamola:
<style type="text/css">
{table.righealterne tr.alterna td{background-color: #3366CC;}
</style>
Viene definita una regola che, tramite la classe 'alternà, assegna il colore di sfondo indicato dal codice esadecimale #3366CC (una tonalità di azzurro) alle righe di una tabella avente come classe 'righealternè. In caso di riutilizzo dello script, se si mantengono le stesse classi sulla tabella e sulle righe, sarà sufficiente modificare il valore #3366CC con quello di un altro colore.
Immediatamente dopo, troviamo la parte JavaScript, un modello di semplicità ed efficienza:
<script type="text/javascript">
onload=ColoraRighe;
function ColoraRighe(){
var tabelle=document.getElementsByTagName("table");
for(i=0;i<tabelle.length;i++){
if(tabelle[i].className.indexOf("righealterne")>=0){
trs=tabelle[i].tBodies[0].rows;
for(j=1;j<trs.length;j+=2)
trs[j].className="alterna";
}
}
}
</script>
Per prima cosa si crea un evento onload che eseguirà la funzione coloraRighe al caricamento della pagina:
onload=ColoraRighe;
Segue la definizione della funzione. Cosa fa con esattezza? Per prima cosa rintraccia tutte le tabelle presenti nella pagina:
var tabelle=document.getElementsByTagName("table");
Quindi, isola quelle che hanno come classe 'righealternè. Solo a queste verrà applicata la colorazione alterna delle righe:
if(tabelle[i].className.indexOf("righealterne")>=0)
Infine, assegna la classe 'alternà solo alle righe pari della suddetta tabella:
trs=tabelle[i].tBodies[0].rows;
for(j=1;j<trs.length;j+=2)
trs[j].className="alterna";
Ora si capisce il senso della regola CSS vista sopra: è lì che definiamo il colore e l'aspetto.
## 2: Il CORPO DELLA PAGINA
Nella pagina di esempio non troviamo nulla di particolare. È questa la forza di questo approccio a Javascript che tenta di separare il più possibile la struttura (HTML), la presentazione (CSS), le funzionalità (Javascript). Ecco il codice (abbreviato) della tabella:
<table class="righealterne" border="1">
<tbody>
<tr>
<td>riga 1 cella 1</td>
<td>riga 1 cella 2</td>
<td>riga 1 cella 3</td>
<td>riga 1 cella 4</td>
<td>riga 1 cella 5</td>
</tr>
........
</tbody>
</table>
Si noti la pulizia. Niente colori di sfondo assegnati con HTML, niente classi CSS. Solo puro e semplice codice strutturale! In realtà una classe CSS viene applicata (si tratta della classe 'alternà), ma ci pensa lo script al momento dell'esecuzione della pagina. Due cose fondamentali da osservare.
La tabella ha come classe 'righealternè. Si può utilizzare qualunque nome, ovviamente, ma si ricordi di apportare le modifiche conseguenti sia alla regola CSS che allo script.
Seconda cosa. Il corpo della tabella (la parte con i tag <tr> e <td>, per intenderci) deve essere racchiusa all'interno dell'elemento <tbody>. Questo perchè nell'interfaccia DOM, <tr> e <td> devono essere discendenti di questo elemento.
