Solved

Changing the bgcolor of table cells using onclick event

Posted on 2002-04-23
8
989 Views
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.
0
Comment
Question by:quantum2
  • 5
  • 2
8 Comments
 

Expert Comment

by:bing2x
Comment Utility
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>
</table>
<table>
<tr>
<td><input type="radio" name="rdoChange" onclick="changeColor('blue');"> Blue</td>
<td><input type="radio" name="rdoChange" onclick="changeColor('red');"> Red</td>
</tr>
</table>

<script>
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
  }
}
</script>
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 50 total points
Comment Utility
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:
   <style>
    .red {background-color:red}
    .white {background-color:white}
    .blue {background-color:blue}
   </style>

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


Cd&
0
 
LVL 1

Author Comment

by:quantum2
Comment Utility
While this solution works, it is not the solution I am looking for.
0
 
LVL 1

Author Comment

by:quantum2
Comment Utility
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.

quantum2
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 1

Author Comment

by:quantum2
Comment Utility
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Toggle?

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++)
     {
        thecell=cellarr[i];
        if (pntr[i].checked)
        {
           document.getElementById(thecell).classname='blue';
        }
        else
        {
           document.getElementById(thecell).className='red';    
        }
     }
   }
//->
</script>

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

Cd&
0
 
LVL 1

Author Comment

by:quantum2
Comment Utility
Basically,
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.

Quantum

0
 
LVL 1

Author Comment

by:quantum2
Comment Utility
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.

-Q2
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Left menu with a header image 6 34
2 CSS questions 11 33
CSS help matching specific span class 2 20
razorCMS: Change Menu Font 4 23
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now