[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 958
  • Last Modified:

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>
0
CarterPertaine
Asked:
CarterPertaine
  • 4
  • 3
  • 2
2 Solutions
 
cyberdevil67Commented:
<input type="radio" onclick="javascript:document.style.backgroundColor=#999999" />
0
 
cyberdevil67Commented:
CarterPertaine,

Sorry Document should be document.name where name is the Id of the cell.

<td Id="Name">
0
 
CarterPertaineAuthor Commented:
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>

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
cyberdevil67Commented:
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>
0
 
ZvonkoSystems architectCommented:
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>


0
 
ZvonkoSystems architectCommented:
Sorry, one <tr> tag is missing in upper example.
0
 
ZvonkoSystems architectCommented:
And if you want to do it for many rows, then check this version:

<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;
  while(theRow && theRow.nodeName!="TR"){
    theRow = theRow.parentNode;
  }
  var cells = theRow.cells;
  cells[0].style.backgroundColor = "#FFFF00";
}
</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>


0
 
ZvonkoSystems architectCommented:
Thanks.
0
 
CarterPertaineAuthor Commented:
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>

0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now