Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Changing the bgcolor of table cells using onclick event

Posted on 2002-04-23
Medium Priority
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 200 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.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

610 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