quick question: javascript/dom change toggle background color on a table

Hello Experts,
I am trying to be able to change the hover background color on a table using a function. I think I close (hopefully), but I am new to this and can't get it right. Here are the parts that I think are important instead of pasting the whole thing. Yes, I know the codes for the color are incorrect. :)

Thanks for your help,
Rhyno99
<style type="text/css">

#newtable{
border:1px solid #000;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
margin:auto;
}
#newtable td{
width:30px;
line-height:30px;
border:1px solid #000;
text-align:center;
cursor: pointer;
}
#newtable td:hover
{
	background-color:#F00;

Open in new window

function hoverColorChange (){
	var hover = document.getElementById('hover_color').value;
	document.getElementById('mytable').style.color= hover; 
}

Open in new window

<div id="hover_color" style="clear:both;"> 
<select name="select1" onChange="hoverColorChange();" value="Change Color"> 
<option selected value="#F00">Green </option>
<option value="#F0F">Blue</option>
<option value="#FF0">Red</option>
<option value="#FFF">WHite</option>
<option value="yellow">Yellow</option>
</select> 

</div>

Open in new window

rhyno99Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GreggCommented:
/**
 * Access the select dropdown via an ID attribute. id="select1"
 * retrieve the selected value (bgColor)
 * assign the backgroundColor property of the table.
 */
function hoverColorChange (){
	var select1 = document.getElementById('select1');
	var bgColor = select1.options[select1.selectedIndex].value;
	document.getElementById('mytable').style.backgroundColor = bgColor; 
}

Open in new window


Add the "id="select1" to select element.
<select name="select1" id="select1" onChange="hoverColorChange();" value="Change Color"> 
<option selected value="#F00">Green </option>
<option value="#F0F">Blue</option>
<option value="#FF0">Red</option>
<option value="#FFF">WHite</option>
<option value="yellow">Yellow</option>
</select> 

Open in new window


Hope this helps.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GreggCommented:
You could also pass in reference to select list directly:

<select name="select1" id="select1" onChange="hoverColorChange(this);" value="Change Color">

And in function:

function hoverColorChange (x){
	var bgColor = x.options[x.selectedIndex].value;
	document.getElementById('mytable').style.backgroundColor = bgColor; 
}

Open in new window

0
rhyno99Author Commented:
It works! Thanks Gregg for your help.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

rhyno99Author Commented:
BTW- I was wondering how to change the hover color in the css. Based on what you saw above, how do I grab this piece of css and change the color so that the color is different when I hover a cell?

#newtable td:hover
{
      background-color:#F00;

Thanks again.
0
GreggCommented:
hi rhyno99, you are welcome! Take a look at http://jsfiddle.net/zX2Wv/

You are correct with the css syntax, except you are missing closing brace }

Give a try and see if works. If not let me know. Thanks!
0
GreggCommented:
<table id="newtable" width="300">
    <tr>
        <td width="33%">apple</td>
        <td width="33%">banana</td>
        <td width="33%">cherries</td>
    </tr>
    <tr>
        <td>green</td>
        <td>yellow</td>
        <td>red</td>
    </tr>
</table>

Open in new window


#newtable td:hover {
     background-color: #ff0000;   
}

Open in new window

0
rhyno99Author Commented:
Whoops. I do have the } in the real file. To change the background color I would use this line:
document.getElementById('mytable').style.backgroundColor

I guess what I was trying to ask was-
What line could I use to change the hover color? My guess was:
document.getElementById('mytable').style.td.hover
but I know that is not right. How would I change this css that is a bit different?

Also, I checked out the link. What is it? I'm guessing a test area for javascript and dom. Is it more than that?
Thanks again for your help
0
rhyno99Author Commented:
-checking out the link. Pretty cool. Thanks
0
rhyno99Author Commented:
Having the same trouble trying to controll this css
#newtable td

I have been trying-
document.getElementById('newtable'+' td').style.backgroundColor = cellColor;
and
document.getElementById('newtable td').style.backgroundColor = cellColor;
among other things. Any thoughts?
0
GreggCommented:
I think that jsfiddle site does a lot. I am not entirely sure. You will see it around EE. That is the first time ive used it.

To make sure i understand correctly, do you want the hover to color to be permanent? As a highlighted row (fixed color) as if someone had selected the row? Or are you trying to only change cell color when mouse is hovering over the cell?
0
rhyno99Author Commented:
Hi Gregg,
I was wondering two things
1. If the hover color can be grabbed and changed with functions. The css that contols it has three words (newtable td:hover)  it is a little different than other classes or ids because it has three words. How do I specify this piece of css?

2. Similar to the problem above,  if the background of the table cells (not the entire table) can be changed in the same way. The CSS that controlls the color of the cell but not the entire table has two words that control it so it is a little different than other classes or ids. This id is called
#newtable td

I have been trying-
document.getElementById('newtable'+' td').style.backgroundColor = cellColor;
and
document.getElementById('newtable td').style.backgroundColor = cellColor;
among other things.

Is there a way to grab and modify either of these two pieces of css and and have them change or toggle with a javascript function? These changes are not permanent, but can be changed based on the button selection.
Thanks for all of your help,
rhyno99  
 
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.