Evidenziare la riga di una tabella al passaggio del mouse

Una funzionalità molto utile per migliorare l’usabilità di una tabella consiste nell’evidenziare una tabella al passaggio del mouse. Con il termine ‘evidenziare’ si intende in questa sede il modificare lo stile in maniera da rendere distinguibile la riga corrente dal resto degli elementi contenuti nella tabella.

Il più delle volte si evidenzia la riga modificando il colore dello sfondo, ma qualsiasi altra operazione può essere compiuta nella stessa maniera (cambiare la dimensione e/o il colore del testo, modificare il bordo, etc.)

I moderni browser supportano l’effetto hover anche sull’elemento tr, quindi è quello su cui andremo ora ad agire con il seguente codice:

tr {
  background-color: #efefef;
}
tr:hover {
    background-color: #dedede;
}

Possiamo vedere nel seguente esempio che passando il mouse su ognuna delle righe di una tabella essa verrà evidenziata con un background leggermente più scuro. La soluzione è compatibile con tutti i browser eccetto Internet Explorer 6.

Per rendere compatibile il lavoro anche per IE6 utilizzeremo una soluzione Javascript. Per comodità faremo uso di jQuery ma anche una soluzione con Javascript puro non presenta problemi di compatibilità.

Per prima cosa utilizziamo i commenti condizionali e includiamo la libreria nella pagina:

<!--[if lte IE 6]>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    //codice Javascript
</script>
<![endif]-->

Una volta inclusa la libreria nella pagina inseriamo il seguente codice:

$(function(){
     $('tr').hover(function(){
           $(this).css('background','#dedede');
     }, function(){
           $(this).css('background','#efefef');
     });
});

A questo punto l’esempio è compatibile anche con i vecchi browser di casa Microsoft. L’esempio compatibile con IE6 è visualizzabile nella seconda demo.