Seleziona cella con "radio"

**Valeria89** · 06-07-2015, 16:23

Come faccio a far tornare la cella della tabella bianca se seleziono un'altro parametro? Questo è il codice che mi cambia il colore della cella selezionata:

codice HTML:

<td width="10%" bgcolor="WHITE" colspan="2">
      <input type="radio" name="cyl"  value="<?=$row["id"]?>"  onclick="this.parentNode.style.backgroundColor='#F5BB8E'">
      <?=$row["cyl"]?>
   </td>

Non riesco a farla tornare bianca se deseleziono.

**KillerWorm** · 06-07-2015, 16:49

Potresti mettere onclick anche sugli altri radio ed eseguire uno script simile ma applicando il colore desiderato, in questo caso "white".
Vedi se ti può andare, ovviamente ci potrebbero essere soluzioni più ottimali, ma non conoscendo il contesto, questa è la più diretta.

**Valeria89** · 06-07-2015, 17:01

Originariamente inviata da KillerWorm

Potresti mettere onclick anche sugli altri radio ed eseguire uno script simile ma applicando il colore desiderato, in questo caso "white".
Vedi se ti può andare, ovviamente ci potrebbero essere soluzioni più ottimali, ma non conoscendo il contesto, questa è la più diretta.

Tutti devono avere quel colore una volta selezionati, se li deseleziono devono tornare bianchi. Cioè, visto che sono dei "radio", posso selezionarne uno solo del gruppo, e solo quello selezionato deve avere quel colore, gli atri come sfondo devono avere il bianco. Nel caso sbagliassi a selezionare, lo sfondo di quello selezionato precedentemente deve ritornare bianco. Ora mi resta il colore come se fosse selezionato. Non so come resettare il tutto quando cambio selezione.

**KillerWorm** · 06-07-2015, 17:20

Aspetta, ma gli input radio stanno in celle differenti?

In tal caso ti posto una soluzione.
Usi per caso jQuery?

**KillerWorm** · 06-07-2015, 18:06

Questo è in semplice JavaScript:

codice:

<script>
  var cyl = document.getElementsByName("cyl");
  var idcyl = cyl.length;
  while (idcyl--){cyl[idcyl].onclick = evidenziaCella};
  function evidenziaCella(){
    var idcyl = cyl.length;
    while (idcyl--){
      cyl[idcyl].parentNode.style.backgroundColor = cyl[idcyl].checked ? "#F5BB8E" : "white";
    }
  }
  evidenziaCella();
</script>

Ti basterà mettere questo blocco di script direttamente nell'html dopo la chiusura della tabella.
A quel punto non ti servirà più avere l'onclick sui singoli radio, dovrai quindi eliminarlo.

Chiaramente devi assicurarti che i vari radio appartengano allo stesso gruppo, cioè abbiano tutti name="cyl".

**lucavizzi** · 06-07-2015, 18:38

Ho scritto una versione che consente di gestire enne gruppi di radio:

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
#table_id td{
 background:#ccc;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var radio=document.querySelectorAll('#table_id input[type="radio"]');
 for(var i=0; i<radio.length; i++){
  radio[i].onclick=checkRow;
 }
}
function checkRow(event){
 var radio=event.target;
 var tr=radio.parentNode.parentNode;
 var tds=tr.querySelectorAll('td');
 for(var i=0; i<tds.length; i++){
  tds[i].style.backgroundColor='#ccc';
 }
 radio.parentNode.style.backgroundColor='#fff';
}
</script>
</head>
<body>
<table id="table_id">
 <tr>
    <td><input type="radio" name="myradio" value="1"></td>
    <td><input type="radio" name="myradio" value="2"></td>
   </tr>
 <tr>
    <td><input type="radio" name="myradio2" value="1"></td>
    <td><input type="radio" name="myradio2" value="2"></td>
   </tr>
</table>
</body>
</html>

Per comodità ho usato la versione 3 del DOM quindi potrebbe avere problemi di retro-compatibilità con i browser non aggiornati.
@KillerWorm da un post su CSS di Valeria89 si evince che ci sono più gruppi di radio.

**Valeria89** · 07-07-2015, 08:52

Originariamente inviata da KillerWorm

Questo è in semplice JavaScript:

codice:

<script>
  var cyl = document.getElementsByName("cyl");
  var idcyl = cyl.length;
  while (idcyl--){cyl[idcyl].onclick = evidenziaCella};
  function evidenziaCella(){
    var idcyl = cyl.length;
    while (idcyl--){
      cyl[idcyl].parentNode.style.backgroundColor = cyl[idcyl].checked ? "#F5BB8E" : "white";
    }
  }
  evidenziaCella();
</script>

Ti basterà mettere questo blocco di script direttamente nell'html dopo la chiusura della tabella.
A quel punto non ti servirà più avere l'onclick sui singoli radio, dovrai quindi eliminarlo.

Chiaramente devi assicurarti che i vari radio appartengano allo stesso gruppo, cioè abbiano tutti name="cyl".

Grazie gentilissimo!

**Valeria89** · 07-07-2015, 08:59

Originariamente inviata da lucavizzi

Ho scritto una versione che consente di gestire enne gruppi di radio:

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
#table_id td{
 background:#ccc;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var radio=document.querySelectorAll('#table_id input[type="radio"]');
 for(var i=0; i<radio.length; i++){
  radio[i].onclick=checkRow;
 }
}
function checkRow(event){
 var radio=event.target;
 var tr=radio.parentNode.parentNode;
 var tds=tr.querySelectorAll('td');
 for(var i=0; i<tds.length; i++){
  tds[i].style.backgroundColor='#ccc';
 }
 radio.parentNode.style.backgroundColor='#fff';
}
</script>
</head>
<body>
<table id="table_id">
 <tr>
    <td><input type="radio" name="myradio" value="1"></td>
    <td><input type="radio" name="myradio" value="2"></td>
   </tr>
 <tr>
    <td><input type="radio" name="myradio2" value="1"></td>
    <td><input type="radio" name="myradio2" value="2"></td>
   </tr>
</table>
</body>
</html>

Per comodità ho usato la versione 3 del DOM quindi potrebbe avere problemi di retro-compatibilità con i browser non aggiornati.
@KillerWorm da un post su CSS di Valeria89 si evince che ci sono più gruppi di radio.

Grazie, sei gentilissimo! Mi aiuti sempre a risolvere i miei mille problemi! Grazie, grazie, grazie!

Discussione: Seleziona cella con "radio"

Strumenti discussione

Ricerca discussione

Visualizza

Seleziona cella con "radio"

Permessi di invio