[javascript] checkbox modifica CSS

[donato.sciarra]

Ciao ragazzi,

spero il titolo sia abbastanza esemplificativo. . .

. . .ho una tabella con delle checkbox , l'effetto che cerco e che se spunto la checkbox la relativa riga si evidenziasse. . .(tipo phpMyAdmin quando si seleziona un campo)

consigli? suggerimenti?

[pierofix]

Per creare un buono script direi di cominciare guardando la struttura HTML della tua tabella. Puoi postarne qui un estratto così magari la sistemiamo, in caso ci siano delle incorrettezze (in cui è molto facile incappare quando si parta di tabelle)?

[donato.sciarra]

questo e' una bozza della tabella che uso . . . non ho definito nessun css per il momento, proprio perche non so come muovermi.

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top">
      <input type="checkbox" name="spunta" value="checkbox" />
    </td>
    <td valign="top">valore da database </td>
    <td valign="top">valore da database </td>
  </tr>
  <tr>
    <td valign="top">
        <input type="checkbox" name="spunta" value="checkbox" />
    </td>
    <td valign="top">valore da database </td>
    <td valign="top">valore da database </td>
  </tr>
</table>

spero sia sufficiente se non basta a chiarire ditemi pure.

grazie

[pierofix]

Benissimo. Allora, quello che volevo fare era prima di tutto imbastire bene la struttura di markup. A parte che è buona pratica in ogni caso, in questo si traduce in uno script performante e non intrusivo.

A vedere il tuo HTML mi sembra quasi che tu non abbia ragionato a sufficienza sul significato di ogni singolo elemento. Per esserne certi - o per smentirmi - ci dovresti descrivere in dettaglio quali saranno i dati estrapolati dal database e che poi andranno a popolare la struttura.

Questo serve al fine di costruire una tabella snella e sufficientemente descrittiva. A partire da quello, poi, lo script si fa in cinque minuti.

[donato.sciarra]

via php creo una riga per ogni record del database che mi interessa. la tabella ha quasi quella struttura, l'ho semplificata perchè sono 7 colonne. . .(per semplificare ho rappresentato quindi due righe con 3 colonne)

dal database vengono estratti solo numeri di al max 5 cifre ciascuno


. . .

[pierofix]

Sì, ok, ma questi dati cosa rappresentano? Voglio dire... di solito si giustifica l'uso di una tabella in base alle sue intestazioni.

Non vorrei tu la stessi usando solamente a scopo di layout e non per una vera esigenza di strutturazione riga-colonna.

[donato.sciarra]

allora i dati rappresentano dei valori di sostanze chimiche presenti in un determinato oggetto. . .

no no per l'impaginazione non uso i tag table e discendenti. . .lo faccio via div e css. . .

Sto parlando semplicemente della tabella che si trova in uno di questi div !

nella prima colonna di ogni riga c'e una checkbox vorrei che se venisse selezionata, oltre a fare quello per cui e' stata messa evidenziasse la relativa riga.

. . . . . ..

[pierofix]

Allora, ti faccio un esempio con mark-up generico così tu te lo adatti.

XHTML

<table id="voti">

   <caption>I voti della classe 1A</caption>

   <thead>
      <tr>
         <th scope="col">Nome</th>
         <th scope="col">Voto</th>
         <th scope="col">Seleziona</th>
      </tr>
   </thead>

   <tbody>
      <tr>
         <td><label for="aldo">Aldo</label></td>
         <td>10</td>
         <td><input id="aldo" name="aldo" value="aldo" type="checkbox" /></td>
      </tr>
      <tr>
         <td><label for="bruno">Bruno</label></td>
         <td>8</td>
         <td><input id="bruno" name="bruno" value="bruno" type="checkbox" /></td>
      </tr>
      
   </tbody>

</table>


CSS

.riga_selezionata
{
   background-color:#CCC;
}


Javascript

window.onload = function()
{
   var voti = document.getElementById('voti').getElementsByTagName('tbody').item(0)
   var checkboxes = voti.getElementsByTagName('input')

   for (var i = 0; i < checkboxes.length; i++)
   {
      checkboxes.item(i).onclick = function()
      {
         if ( this.checked )
         {
            var riga = this.parentNode.parentNode
            riga.className = 'riga_selezionata'
         }
         else
         {
            var riga = this.parentNode.parentNode
            riga.className = ' '
         }
      }
   }
}

Lo script funziona per un numero arbitrario (potenzialmente infinito) di righe in quanto è slegato dalla struttura XHTML.

[donato.sciarra]

funziona alla perfezione !

grazie GURU