Tabelle con righe alternate

Come abbiamo sempre ricordato, le tabelle andrebbero usate solo per visualizzare dati, quindi dati tabellari.
In questo tutorial vogliamo illustrare un modo per aumentare la leggibilità dei dati tabellari, alternando il colore delle righe.

Ci sono svariati tutorial in inglese, il più famoso è quello apparso su ALA e chiamato Zebra Tables. Prendendo spunto da questa necessità ecco una soluzione simile.

Il problema di avere delle tabelle con righe alternate, sorge quando i dati sono eccessivi, e fare questo procedimento di “evidenziazione” manualmente risulta oneroso. Ovviamente se si dispone di pagine server-side tutto questo è inutile, perchè con qualsiasi linguaggio e un “if” si possono alternare le righe.

Invece, nella nostra situazione, vogliamo fare questo solo con Css e js. I Css in questo caso a dir la verità non hanno molta importanza, perchè c’è da definire solo lo stile delle righe di colore diverse ad esempio dal bianco; per cui l’unica classe da definire sarebbe:

table.alternarighe tr.alterna td { background-color: #ade; }

Il vero “hack” sta nel codice js e negli attributi dell’oggetto DOM. Questa è la funzione:

function DistinguiRighe () {
   var tables=document.getElementsByTagName("table");
   for (i=0; i<tables.length; i++) {
    if (tables[i].className.indexOf("alternarighe") >= 0) {
       trs = tables[i].tBodies[0].rows;
       for (j=1; j<trs.length; j += 2)
       trs[j].className = "alterna";
    }
  }
}

La funzione js, tramite getElementsByTagName individua tutte le tabelle tramite il Tag “table”, e per ognuna verifica se contiene la parola alternarighe del Css, quindi alle righe dispari associa la classe alterna.

Tutto qui. Molto semplice, da provare subito. Ovviamente la funzione js và richiamata nella pagina per essere eseguita, semplicemente con:

onload = DistinguiRighe;

Tanti altri esempi sono rintracciabili in rete oltre a Zebra Tables di ALA, segnaliamo su Sitepoint, “Alter Table Row“.

Provate e commentate!