CSS e JQuery: creare una tabella con righe di colori alternati

Delicious Stumble Upon | CSS e JQuery: creare una tabella con righe di colori alternati

novembre 13th, 2008 by Simone D'Amico in: CSS, Grafica, jQuery, javascript | 1 Comment »

Il tutorial consente di realizzare una tabella come quella in figura; consente quindi di avere lo sfondo delle righe di una tabelle con colori alternati.

Le soluzioni per realizzare una tabella del genere si dividono in tre tipi.

1. Il primo modo è il più semplice e può essere utilizzato solo per tabelle statiche e non create dinamicamente. Basta infatti dare un nome della classe alla riga alternandola con un altra classe. Questo metodo però non è ovviamente realizzabile quando abbiamo a che fare con tabelle dinamiche.
2. Il secondo modo è realizzabile tramite linguaggio server-side o, meglio ancora per chi ne fa uso, attraverso le librerie di templating (ad esempio Smarty per php). Basta infatti una if che controlla se la riga è pari o dispari e assegnarle di conseguenza la classe. Soluzione utile perchè funziona sicuramente anche quando si naviga con Javascript disabilitato però si finisce per mischiare design con programmazione.
3. Il terzo modo è quello un pò più “pulito” in quanto non obbliga a mischiare gli stili con la parte di programmazione di una pagina. E’ realizzato utilizzando Javascript e, nella fattispecie di jQuery. E’ tranquillamente realizzabile anche senza usare framework, basta solo qualche riga di codice in più. Lo svantaggio che ha questo metodo è il punto di forza di quello precedente, ovvero quello di non funzionare se si ha Javascript disabilitato. In questo articolo vedremo questo metodo in dettaglio.

Innanzitutto creiamo il codice html che realizza la tabella:

<table cellpadding="0" cellspacing="0">
 <tr>
  <th>State</th>
  <th>Date of Poll</th>
  <th>% Voting Dem.</th>
  <th>% Voting GOP</th>
 </tr>
 <tr>
  <td>AR</td>
  <td>10/27</td>
  <td>44</td>
  <td>54</td>
 </tr>
 <tr>
  <td>AZ</td>
  <td>10/23</td>
  <td>41</td>
  <td>49</td>
 </tr>
 ... and so on ...
</table>

e poi scriviamo quello CSS per dare uno stile alla tabella e, soprattutto creiamo la classe “odd” (dispari in inglese) che avrà un colore di sfondo diverso dalla tabella:

table {
    width: 100%;
    border: 1px solid #cef;
    text-align: left; }
th {
    font-weight: bold;
    background-color: #acf;
    border-bottom: 1px solid #cef; }
td,th {
    padding: 4px 5px; }
.odd {
    background-color: #def; }
.odd td {
    border-bottom: 1px solid #cef; }

A questo punto non resta che scrivere il codice Javascript ed abbiamo finito:

$(document).ready(function(){
    $("tr:odd").addClass("odd");
});

In uno dei prossimi articoli aggiungerò un piccolo dettaglio al tutorial per “abbellire” la tabella.

Via | cssnewbie