Changing the bgcolor of table cells using onclick event

Posted on 2002-04-23
Last Modified: 2010-07-27
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.
Question by:quantum2
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2

Expert Comment

ID: 6964613
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
LVL 53

Accepted Solution

COBOLdinosaur earned 50 total points
ID: 6966006
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'">


Author Comment

ID: 6969274
While this solution works, it is not the solution I am looking for.
Independent Software Vendors: 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!


Author Comment

ID: 6969279
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.


Author Comment

ID: 6969302
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.
LVL 53

Expert Comment

ID: 6969370

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. :^)


Author Comment

ID: 6969562
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.



Author Comment

ID: 6969569
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.


Featured Post

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question