Link to home
Start Free TrialLog in
Avatar of CarterPertaine
CarterPertaine

asked on

Change cell background color based on radio button selected in another cell.

I want to change the background color of column 1 if one of the radio buttons with values A, 1, 2, 3, or 4 is selected from column 2 without having to refresh the frame.  I want it to be blank (white?) if value N is selected.   The table is being built programmatically.   Here is a cut down sample of my table.  

<TABLE>
    <TR>
    <TD>Column 1</TD>
    <TD>Selection</TD>
    </TR>
    <TD>00250000</TD>
    <TD><INPUT TYPE="RADIO" NAME="2" VALUE="N" >None<INPUT TYPE="RADIO" NAME="2" VALUE="A">All<INPUT TYPE="RADIO" NAME="2" VALUE="1">1<INPUT TYPE="RADIO" NAME="2" VALUE="2">2<INPUT TYPE="RADIO" NAME="2" VALUE="3">3<INPUT TYPE="RADIO" NAME="2" VALUE="4" CHECKED>4</TD>
    <TD></TD>
    </TR>

    <TD>00201469</TD>
    <TD><INPUT TYPE="RADIO" NAME="3" VALUE="N" CHECKED>None<INPUT TYPE="RADIO" NAME="3" VALUE="A">All</TD>
    <TD></TD>
    </TR>

    <TD>00201556</TD>
    <TD><INPUT TYPE="RADIO" NAME="4" VALUE="N" CHECKED>None<INPUT TYPE="RADIO" NAME="4" VALUE="A">All</TD>
    <TD></TD>
    </TR>

</table>
Avatar of cyberdevil67
cyberdevil67
<input type="radio" onclick="javascript:document.style.backgroundColor=#999999" />
ASKER CERTIFIED SOLUTION
Avatar of cyberdevil67
cyberdevil67
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CarterPertaine
CarterPertaine

ASKER

Forgive my ignorance.  I'm a newbie to js.   I'm not quite getting what you are saying.  Am I any where close?  

thanks,

<TABLE>
    <TR>
    <TD>Column 1</TD>
    <TD>Selection</TD>
    </TR>
    <TD Id="TD2">00250000</TD>
    <TD>
       <INPUT TYPE="RADIO" onclick="javascript:document.TD2.style.backgroundColor=#ffffff" NAME="2" VALUE="N" >None
       <INPUT TYPE="RADIO" onclick="javascript:document.TD2.style.backgroundColor=#999999" NAME="2" VALUE="A">All
       <INPUT TYPE="RADIO" onclick="javascript:document.TD2.style.backgroundColor=#888888" NAME="2" VALUE="1">1
       <INPUT TYPE="RADIO" onclick="javascript:document.TD2.style.backgroundColor=#777777" NAME="2" VALUE="2">2
    </TD>
    </TR>

</table>

Avatar of cyberdevil67
cyberdevil67
Yeah very

<TABLE>
    <TR>
    <TD>Column 1</TD>
    <TD>Selection</TD>
    </TR>
    <TD Id="TD2">00250000</TD>
    <TD>
       <INPUT TYPE="RADIO" onclick="javascript:TD2.style.backgroundColor='ffffff'" NAME="2" VALUE="N" >None
       <INPUT TYPE="RADIO" onclick="javascript:TD2.style.backgroundColor='999999'" NAME="2" VALUE="A">All
       <INPUT TYPE="RADIO" onclick="javascript:TD2.style.backgroundColor='888888'" NAME="2" VALUE="1">1
       <INPUT TYPE="RADIO" onclick="javascript:TD2.style.backgroundColor='777777'" NAME="2" VALUE="2">2
    </TD>
    </TR>

</table>
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
I would do that like this:

<html>
<body>
<form>
<TABLE>
    <TR>
    <TD>Column 1</TD>
    <TD>Selection</TD>
    </TR>
    <TD Id="TD2">00250000</TD>
    <TD onclick="document.getElementById('TD2').style.backgroundColor='#ffff00';">
       <INPUT TYPE="RADIO" NAME="R2" VALUE="N" >None
       <INPUT TYPE="RADIO" NAME="R2" VALUE="A">All
       <INPUT TYPE="RADIO" NAME="R2" VALUE="1">1
       <INPUT TYPE="RADIO" NAME="R2" VALUE="2">2
    </TD>
    </TR>
</table>
<input type=submit>
</form>
</body>
</html>


Avatar of Zvonko
Zvonko
Flag of North Macedonia image
Sorry, one <tr> tag is missing in upper example.
SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
Thanks.
Avatar of CarterPertaine
CarterPertaine

ASKER

Thanks for all your help.  Here is the final version that works perfectly.   If None is selected, it sets background to white.  If another is selected it sets background to yellow.  

<!-- saved from url=(0022)http://internet.e-mail -->
<html>
<head>
<script>
function init(){
  var elem = document.forms[0].elements;
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="radio" && elem[i].name.indexOf("R")==0){
      elem[i].onclick = checkRow;
    }
  }
}
function checkRow(){
  var theRow = this.parentNode;
  var radioval = this.value;
  while(theRow && theRow.nodeName!="TR"){
    theRow = theRow.parentNode;
  }
  var cells = theRow.cells;
 if(radioval!="N")
    {
    cells[0].style.backgroundColor = "#FFFF00";
    }
  else
    {
    cells[0].style.backgroundColor = "#FFFFFF";
    }
}
</script>
</head>
<body onLoad="init()">
<form>
<TABLE>
    <TR>
    <TD>Column 1</TD>
    <TD>Selection</TD>
    </TR>
    <TD>00250000</TD>
    <TD><INPUT TYPE="RADIO" NAME="R2" VALUE="N" >None<INPUT TYPE="RADIO" NAME="R2" VALUE="A">All<INPUT TYPE="RADIO" NAME="R2" VALUE="1">1<INPUT TYPE="RADIO" NAME="R2" VALUE="2">2<INPUT TYPE="RADIO" NAME="R2" VALUE="3">3<INPUT TYPE="RADIO" NAME="R2" VALUE="4" CHECKED>4</TD>
    <TD></TD>
    </TR>
    <TR>
    <TD>00201469</TD>
    <TD><INPUT TYPE="RADIO" NAME="R3" VALUE="N" CHECKED>None<INPUT TYPE="RADIO" NAME="R3" VALUE="A">All</TD>
    <TD></TD>
    </TR>
    <TR>
    <TD>00201556</TD>
    <TD><INPUT TYPE="RADIO" NAME="R4" VALUE="N" CHECKED>None<INPUT TYPE="RADIO" NAME="R4" VALUE="A">All</TD>
    <TD></TD>
    </TR>
</table>
<input type=submit>
</form>
</body>
</html>