righe selezionate cambiano colore

[j0tt0]

Salve a tutti,

su una tabella che contiene n numero di righe per rendere la visualizzazione più agevole coloro le righe in modo alternato, al passaggio del mouse inoltre la riga cambia colore per consentire una veloce individuazione .
Un esempio semplificato è presente a questo indirizzo:

Alla fine di ogni riga è presente una checkbox, quello che vorrei ottenere è che se l'utente clicca su questa checkbox la riga corrispondente assume un certo colore e questo colore rimane fisso fino a quando la checkbox non viene deselezionate.
In questo modo tutte le righe selezionate saranno colorate allo stesso modo.

Ho provato usando onClick"" sia sulla checkbox che sul <TR> ma senza successo.
Sapete come è possibile ottenerlo?

Grazie tante.
Jotto

P.S. Ho notato che mentre su Explorer viene visualizzato perfettamente, su Firefox la tabella all'inizio appare con le righe non colorate...sapete come mai?

[Mich_]

Ci sono vari problemi.

1. Marcatura.
C'e` uan sovrastruttura di marcatori, ceh complica parecchio la realizzazione del CSS: i <div> e gli <span> interni ai <td> andrebbero tolti

2. attributi HTML di formattazione e CSS.
Se usi attributi HTML per la formattazione, ed anche CSS, il browser puo` scegliere di seguire l'uno o l'altro: per evitare conflitti devi eliminare tutta la formattazione realizzata con attributi HTML e spostarla invece nel CSS

3. Javascript.
Gli eventi onqualcosa introducono istruzioni javascript. D'altronde noncredo che riesci a realizzare quanto chiedi con solo CSS, per cui ti consiglio, prima di sistemare il CSS e la formattazione, poi di chiedere come realizzare l'evidenziazione della riga con il checkbox selezionato tramite JS.
Ma prima ti conviene avere gli stili pronti per tutte le condizioni: in JS cambiare classe ad un oggetto e` una cosa velocissima e semplice.

[pierofix]

Data la natura dei dati in questione, la tabella è una struttura esagerata. Propongo una semplice lista, la quale risulta anche di più rapida e accessibile consultazione. Un esempio.

XHTML

<form id="ordina_prodotti" action="...">
   

Ordina i nostri prodotti per la casa.</p>
   <ul id="elenco_prodotti">[*]
         <label for="stappa_lattine">Stappa lattine</label>
         <input id="stappa_lattine" name="stappa_lattine" type="checkbox" value="stappa_lattine" />
      [*]
         <label for="trita_briciole">Trita-briciole</label>
         <input id="trita_briciole" name="trita_briciole" type="checkbox" value="trita_briciole" />
      
      [/list]
</form>


CSS

.prodotto_hover
{
   background-color:#D4D4D4;
}
.prodotto_selezionato
{
   background-color:#D41122;
}


Javascript

window.onload = function()
{
   var elenco_prodotti = document.getElementById

('elenco_prodotti')
   var prodotti = elenco_prodotti.getElementsByTagName('li')

   for (var i = 0; i < prodotti.length; i++)
   {
      prodotti.item(i).onmouseover = function()
      {
         this.className += ' prodotto_hover'
      }
      prodotti.item(i).onmouseout = function()
      {
         this.className = this.className.replace('prodotto_hover', ' ')
      }
   }

   function colora_prodotti()
   {
      for (var i = 0; i < prodotti.length; i++)
      {
         var input_prodotto = prodotti.item(i).getElementsByTagName('input').item(0)
         if ( input_prodotto.checked )
         {
            prodotti.item(i).className = ' prodotto_selezionato'
         }
         else
         {
            prodotti.item(i).className = prodotti.item(i).className.replace('prodotto_selezionato', ' ')
         }
      }
   }

   for (var i = 0; i < prodotti.length; i++)
   {
      var input_prodotto = prodotti.item(i).getElementsByTagName('input').item(0)
      input_prodotto.onclick = function()
      {
         colora_prodotti()
      }
   }
}

[j0tt0]

Grazie ad entrambi per la risposta.

Pierofix, il tuo codice è ineccepibile, io però mi trovo ad avere parecche righe di diverse colonne quindi non posso usare una semplice lista.

Per avere un esempio chiaro di dove andrò ad utilizzarlo ti prego di dare un'occhiata qui: http://www.jottoart.com/acer.htm questa è esattamente la lista che si viene a creare dinamicamente.
Come vedi riesco ad evidenziare la riga al passaggio del mouse ma non riesco a fare quello che hai fatto colorando di rosso la riga corrispondente al checkbox selezionato.

Hai idea di come potrei implementarlo su quella lista?

Grazie mille.
Jotto

[pierofix]

Ah, ok: allora la tabella è effettivamente giustificabile. Vado con un altro esempio.

XHTML

<form id="ordina_prodotti" action="...">
   <table>

      <caption>Prodotti della linea <cite>Acer</cite></caption>

      <thead>
         <tr>
            <th scope="col">Prodotto</th>
            
            <th scope="col">Confronta</th>
         </tr>
      </thead>

      <tbody id="elenco_prodotti">
         <tr>
            <td>
               <label for="aspire">Aspire</label>
            </td>
            
            <td>
               <input id="aspire" name="aspire" type="checkbox" value="aspire" />
            </td>
         </tr>
         
      </tbody>

   </table>
</form>


CSS

.prodotto_hover
{
   background-color:#D4D4D4;
}
.prodotto_selezionato
{
   background-color:#D41122;
}


Javascript

window.onload = function()
{
   var elenco_prodotti = document.getElementById('elenco_prodotti')
   var prodotti = elenco_prodotti.getElementsByTagName('tr')

   for (var i = 0; i < prodotti.length; i++)
   {
      prodotti.item(i).onmouseover = function()
      {
         this.className += ' prodotto_hover'
      }
      prodotti.item(i).onmouseout = function()
      {
         this.className = this.className.replace('prodotto_hover', ' ')
      }
   }

   function colora_prodotti()
   {
      for (var i = 0; i < prodotti.length; i++)
      {
         var input_prodotto = prodotti.item(i).getElementsByTagName('input').item(0)
         if ( input_prodotto.checked )
         {
            prodotti.item(i).className = ' prodotto_selezionato'
         }
         else
         {
            prodotti.item(i).className = prodotti.item(i).className.replace('prodotto_selezionato', ' ')
         }
      }
   }

   for (var i = 0; i < prodotti.length; i++)
   {
      var input_prodotto = prodotti.item(i).getElementsByTagName('input').item(0)
      input_prodotto.onclick = function()
      {
         colora_prodotti()
      }
   }
}

[j0tt0]

Grande il tuo script va che è una meraviglia!

Giusto per capire meglio il codice:

<label for="aspire">contenuto della cella</label>

serve a specificare quali celle colorare?

Quindi se ho una riga con n colonne in tutti i tag <td> di quella riga devo usare la stessa label , esatto?

Grazie ancora.
Jotto

[j0tt0]

Ok mi sono risposto da solo mopdificando il codice.

In pratica il LABEL sta a circoscrivere la parte di testo o altro che una volta cliccato da via alla colorazione.

Ok quindi nel mio caso non è strettamente necessario (meglio allegeriamo il codice!)
Grazie di tutto!
Jotto

[pierofix]

Quando guardi una struttura (X)HTML devi sforzarti di togliere dalla mente la sua relativa trasposizione visiva sullo schermo. (X)HTML serve semplicemente a strutturare e a descrivere i dati del documento.

Prendiamo un input checkbox qualsiasi. Se lo vediamo su uno schermo intuiremo la sua funzione guardando il testo presente alla sua sinistra o a alla sua destra, giusto? Bene. Siccome a livello di mark-up la 'prossimità spaziale' non è sufficiente a creare una relazione, ci aiutiamo con il marcatore <label>.

<input id="prioritaria" name="prioritaria" type="checkbox" value="prioritaria" />
<label for="prioritaria">Spedisci con posta prioritaria</label>

Gli attributi id e for sono quelli che permettono di 'legare' il testo al suo input.

Quindi è necessario a livello logico.