onmouseover con ritorno a colori alternati

[stiffa]

ciao
Ho una tabella con 10 righe...
le righe sono colorate dinamicamente in questo modo

var sfondo="";
                
for(k=0;k<10;k++){
if(k%2){
sfondo = "#DDDDEE";
}else
  sfondo = "#CDCDF7";
document.write('<tr onMouseover="highlightie5(this)" onMouseout="lowlightie5(this);" style="background:'+sfondo+'"><td>yyy</td></tr>');
} 

le righe vengono colorate alternate , 1 con #DDDDEE e 1 con #CDCDF7


A questo punto con il metodo highlightie5() vado a cambiare lo sfondo della riga...

function highlightie5(tr){
    tr.style.backgroundColor="#AAAAEE";
} 

e quello che vorrei e' che all'onmouseout mi tornasse al colore di sfondo che aveva prima

function lowlightie5(tr){
   ??????
   
} 

non riesco ad ottenere il colore di fondo che hanno prima di passarci sopra.

come posso fare?

[homezappa]

Puoi salvarti per ogni tr il colore base ed usarlo nella onmouseover, così:

var sfondo="";
                
for(k=0;k<10;k++){
if(k%2){
sfondo = "#DDDDEE";
}else
  sfondo = "#CDCDF7";
document.write('<tr rel="' + sfondo + '" onMouseover="highlightie5(this)" onMouseout="lowlightie5(this);" style="background:'+sfondo+'"><td>yyy</td></tr>');
}

quindi la funzione lowlightie5 sarà:

function lowlightie5(tr){ 
	tr.style.backgroundColor=tr.getAttribute("rel");
}

HTH
Zappa

[stiffa]

che dire....miticissimo.
grazie, funziona perfettamente

[homezappa]

Bene, mi fa piacere
Tao!
Zappa

[pierofix]

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:

<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>

Poi preparerei delle classi CSS per dare i colori alle righe:

.riga_pari
{
   background-color:#CCC;
}
.riga_dispari
{
   background-color:#DDD;
}
.riga_pari_hover
{
   background-color:#DDE;
}
.riga_dispari_hover
{
   background-color:#CDCDF7;
}

Infine, con un javascript non intrusivo, andiamo ad assegnare le classi ai vari elementi della tabella:

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'
         }
      }
   }
}

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.

Ma son pirla io, o mi sembra davvero un modo di lavorare più intelligente e pulito?

[stiffa]

indubbiamente hai ragione
Grazie anche per la tua soluzione.
Ma il progetto a cui lavoro è fondamentale javascript (è una specifica di progetto) e quindi non sto a pensare se js fosse disabilitato...perche in tal caso la tabella sarebbe l'ultimo dei miei problemi...

Grazie a tutti e due