Solved

Changing the bgcolor of table cells using onclick event

Posted on 2002-04-23
8
991 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
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>
</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
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:
   <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
ID: 6969274
While this solution works, it is not the solution I am looking for.
0
 
LVL 1

Author Comment

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

quantum2
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Author Comment

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

Expert Comment

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

-Q2
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
can't display bootstrap glyphs in select menu 4 33
jQuery Canlendar click function 5 42
iOS 10 iPad Zoom and acroll 4 54
Syntax Error 2 47
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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

863 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

28 Experts available now in Live!

Get 1:1 Help Now