Highlight di una riga in tabella


Per rendere un’effetto grafico un
po’ più gradevole e simulare un minimo di interattività
con l’aiuto di soli fogli di stile ed html basta creare 2 fogli
di stile relativi ad una riga.
Creiamo un foglio di stile tipo stile.css con questo contenuto:

/* Foglio di stile "stile.css"
per higlight al passaggio del mouse */
tr.highLight {
   background: Highlight;
   color: HighlightText;
}

tr.normale {
   background : #FFFFFF;
}

Nella pagina HTML dobbiamo linkare il foglio di stile nella sezione
<head> della pagina per poter poi utilizzare gli stili specificati.

Questa l’istruzione per il link del foglio di stile:

<link href="/stile.css" rel="stylesheet"
type="text/css">

Attenzione ad inserire il link al foglio di stile il percorso assoluto
del foglio di stile, nel caso in cui il webserver non sia in grado
di trovare il file del foglio di stile, nella pagina i riferimenti
agli stili verranno ingorati.

Per far in modo che al passaggio del mouse cambi colore l’intera
riga ed il relativo testo, dobbiamo utilizzare degli eventi:
– onMouseOver che indica il passaggio del mouse
– onMouseOut che indica l’uscita del mouse dalla riga
Basterà quindi indicare al browser che quando in mouse è
sopra alla riga (Over) la classe della riga cambia con "highlight",
mentre quando il mouse è fuori dalla riga la classe della
riga stessa è "normale", per risolvere questa procedura
basta utilizzare dei javascript che assegnano all’oggetto riga la
classe desiderata:

<!— Esempio di codice per highlight
—>

<tr class="normale"
  onMouseOver="this.className=’highLight’"
  onMouseOut="this.className=’normale’">
    <td>Col1 Riga1</td>
    <td>Col2 Riga1</td>
</tr>
<tr class="normale"
  onMouseOver="this.className=’highLight’"
  onMouseOut="this.className=’normale’">
    <td>Col1 Riga2</td>
    <td>Col2 Riga2</td>
</tr>

Per cambiare la classe della riga ho utilizzato la proprietà
classname dell’oggetto this, javascript intende per this l’oggetto
cui si sta puntando sopra.

Conclusioni e considerazioni:
Pensandoci ho avuto la sensazione che sia possibile affettuare lo
stesso effetto non solo per la riga ma anche per la cella specifica,
basta riportare il tutto sul td anzichè sul tr, ho prova
ed è vero, l’effetto non è molto entusiasmante, forse
per un difetto di colori, magari con colori meno opposti diventa
più gradevole.
Ovviamente dopo aver provato la cella ho provato anche la tabella
intera, funziona ma è inutile dire che l’effetto è
un pugno allo stomaco :-)
Ho notato inoltre che a volte può essere molto lenta la lettura
della tabella per intero, dipende dal computer, dal browser e dal
numero di righe presenti nella tabella, infatti più righe
ci sono peggio è, diventa di una lentezza epocale.

Highlight di una riga in tabella ultima modifica: 2003-09-08T00:00:00+00:00 da Enrico

Related Posts

Comments are closed.