Non capisco perchè vi ostinate a usare javascript in questo modo e a trattare il markup con così poco rispetto.Mi spiego.
Innanzitutto, una soluzione come quella presentata a inizio discussione presenta un grave errore concettuale: in caso di javascript disattivato, infatti, la tabella non viene visualizzata. E' una perdita di informazione inammissibile.
Secondo, per gestire la grafica di un documento web hanno inventato i CSS: perchè non sfruttarli? Sono lì apposta.
In ultimo, homezappa propone di usare l'attributo rel per salvare il colore originario, quando tale attributo ha ben altri fini, scopi e motivazioni.
Per prima cosa direi di scrivere la tabella direttamente nella struttura di markup della pagina:
Poi preparerei delle classi CSS per dare i colori alle righe:codice:<table id="voti"> <caption> I voti della classe 1A. </caption> <thead> <tr> <th scope="col">Allievo</th> <th scope="col">Voto</th> </tr> </thead> <tbody> <tr> <td>Aldo</td> <td>10</td> </tr> <tr> <td>Bruno</td> <td>8.5</td> </tr> </tbody> </table>
Infine, con un javascript non intrusivo, andiamo ad assegnare le classi ai vari elementi della tabella:codice:.riga_pari { background-color:#CCC; } .riga_dispari { background-color:#DDD; } .riga_pari_hover { background-color:#DDE; } .riga_dispari_hover { background-color:#CDCDF7; }
Se javascript viene disattivato, le informazioni sono comunque accessibili. Per la grafica abbiamo usato lo strumento appropriato. Abbiamo rispettato il markup lasciandogli fare il suo lavoro, senza inquinarlo con elementi superflui o addirittura usati in modo inappropriato.codice:window.onload = function() { var tabella = document.getElementById('voti') var tabella_corpo = tabella.getElementsByTagName('tbody').item(0) var righe = tabella_corpo.getElementsByTagName('tr') for (var i = 0; i < righe.length; i++) { if ( i % 2 ) { righe.item(i).className = 'riga_pari' } else { righe.item(i).className = 'riga_dispari' } } for (var i = 0; i < righe.length; i++) { righe.item(i).onmouseover = function() { if ( i % 2 ) { righe.item(i).className = 'riga_pari_hover' } else { righe.item(i).className = 'riga_dispari_hover' } } righe.item(i).onmouseout = function() { if ( i % 2 ) { righe.item(i).className = 'riga_pari' } else { righe.item(i).className = 'riga_dispari' } } } }
Ma son pirla io, o mi sembra davvero un modo di lavorare più intelligente e pulito?![]()

Mi spiego.
Rispondi quotando