Improve company productivity with a Business Account.Sign Up

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1009
  • Last Modified:

Changing the bgcolor of table cells using onclick event

Ok guys....
I guess I am not remembering what I thought I had filed away. I have two radio buttons, when one is clicked I want to change the color of the cell I clicked in green, when I select the other radio button, I want the green to turn white and the wite (from the other radio button) to turn red.

So picture a 2 x 2 table
IN the left cells I have some text
In the right cells I have a radio button.

On the onclick button I want to change the color of all 4 cells as described above. I can do the one cell onclick but cant seem to remember how to do more than one cell.
  • 5
  • 2
1 Solution
try to use this to change the cells

<table id="tableTest">
<tr><td> 1 </td></tr>
<tr><td> 2 </td></tr>
<tr><td> 3 </td></tr>
<td><input type="radio" name="rdoChange" onclick="changeColor('blue');"> Blue</td>
<td><input type="radio" name="rdoChange" onclick="changeColor('red');"> Red</td>

var getTableId = document.getElementById('tableTest');
var getCell = getTableId.getElementsByTagName('TD');

function changeColor(color) {
  for(i=0;i<getCell.length;i++) {
   getCell[i].style.backgroundColor = color
If the "answer" supplied by a very disrespectful member does not answer your question, you should reject it or most expert will not post here.  Unfortuantely the member has decided that they will not follow the guidelines, and they have posted weak "answers" in a number of questions. It may be necessary to have their account reviewed by admin.  I apologize for the bad behaviour of the member.

Now to your problem if you give each cell an id then you can reference the atttributes of each independently.

I have found the most efficient way to cahnge cell backgrounds is to use a change of class.

In the head:
    .red {background-color:red}
    .white {background-color:white}
    .blue {background-color:blue}

then for the cells: <td id="cell1" class="red">
for the radios:
<input type="radio" onClick="document.getElementById('cell1').className='blue'">

quantum2Author Commented:
While this solution works, it is not the solution I am looking for.
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to and use offer code ‘EXPERTS’ to get 10% off your first purchase.

quantum2Author Commented:
This is exactly what I was looking for as I can embed the style and have this definition to be able to use all over my pages. I have no idea why I couldnt not remember this, but I appreciate the help.

Sorry it took so long to get the points assigned.

quantum2Author Commented:
I am going to have to play with it some. I want this to work as a toggle, but I am sure not that I see how to implement it correctly, that I can make it work as a toggle color change.

Meaning, the cell is the same color as the background, when you enable the function that is represented by the radio button the cell turns another color, when you disable on another radio button the enabled color returns to its original color, and the disabled cell highlights to indicated the feature is disabled.

Thanks again.

If the radios are the same name then they are treated as and array.  I you put the cell name in an array as well then:

<script language ="JavaScript">
  var cellarr new Array('cell1','cell2',cell3','cell4');
  var pntr=document.myform.rads;
  function togglecell()
     for (i=0;i<pntr.length;i++)
        if (pntr[i].checked)

Then call the function from the radios and it will act as as refresh

<input type="radio" onClick="togglecell()'">

You can make it more complex by adding additional arrays to set back to a default or a previous color.  As long as the array line up you can have all kinds of flexibility just by changing the className.

Thanks for the A. :^)

quantum2Author Commented:
I have a form with two boxes (tables) with options. One is for credit card on file, one is to enter a new card for a single transaction. When you enable the new card information, I watned to turn the cell for the enabled radio button green, and then dim out the other table to indicated it is disabled. Then if you selected the disable new card inforamtion (the default) its cell would turn a color and then the card on file table would be re-enabled and highlighted. JavaScript is testing the state of the radio buttons so I know what data to pass on the post.

This is what I ended up doing.

in my CSS I defined the background colors for each of the color states. Then in my radio button click events, I tagged all of the color changes in a row so that multiple cells would change on the single click.

The radio inout type ended up looking like this:
<input type="radio" name="radiobutton" value="radiobutton" checked onClick="document.getElementById('cell3').className='Red',document.getElementById('cell4').className='Red', document.getElementById('cell1').className='White',document.getElementById('cell2').className='white',document.getElementById('current').className='Homesum'">

The page that does this is real nice now, and works very well.

Basically, I have created a site for online transactions that is a tempalte where everything in the site can be manipulated by CSS rather than having a great deal of custom graphcis etc. Visual cues were important, and I watned to avoid FLASH as not all of our customers will be able to use it. So, CSS, DHTML and JS were the solution.

Thanks again for the help.


quantum2Author Commented:
Your array solution is cleaner from a code maintenance point of view. I will duplicate the same page and see how well that works. All in all, I really apprecaite the help, I was missing the ID in the tables when i was trying to do it, and by not having an ID I could not selectively change the colors in the other tables over the page.

God I love this site.... Time for me to go help someone and spread the wealth.

Your welcome for the "A"

Short, sweet answers that work always get an "A" from me. I wouldnt ask if I wasnt stuck, and when I get a good answer I appreciate it.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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