Tabelle a colori alternati con jQuery e CSS

Con poche righe di codice javascript è possibile rendere le tabelle html non solo più gradevoli, ma anche più accessibili.

Con le funzioni addClass() - removeClass() è possibile assegnare/rimuovere una classe a un oggetto jquery.

$(function() {
$('#mytable tr:even').addClass('yellow')//viene assegnata questa classe
//è possibile inserire even o odd
});

E’ possibile modificare il colore al passaggio del mouse. In questo caso occorre utilizzare gli eventi mouseover() e mouseout().

//cambio colore al passaggio del mouse
$(function() {
$('#mytable2 tr').mouseover(function() {
$(this).addClass('over');//al passaggio del mouse viene assegnata questa classe
});
$('#mytable2 tr').mouseout(function() {
$(this).removeClass('over');//la classe viene rimossa
});
});

Segnalo questo tutorial semplice e completo su questo argomento:

Table striping made easy by 15 days of jQuery

Articoli simili:

• Tutorial jQuery
• Free e-book jQuery
• Animazioni con jQuery
• jQuery PHP Ajax Autosuggest
• Plugin e tutorial per gallerie immagini con JQuery