...

View Full Version : Changing Cell Background with javaScript



MattJakel
07-01-2004, 07:51 PM
I'm working on a script that involves selecting a certain cell with a checkbox. I'd like the background of the cell to change colors to indicate that it has been clicked. I'm using the onClick event in the checkbox and it calls a function passing an argument with the table cell's id in it. I know I have to use getElementById and then change the background from there, but I have no idea how to do this.

Thanks,
Matt

A1ien51
07-01-2004, 10:02 PM
Basic idea is to do it this way, there are more complicated ways of doing it.


<script type="text/javascript">
function changeBG(cBox,xID){
if(cBox.checked)document.getElementById(xID).style.background='red';
else document.getElementById(xID).style.background='white';
}
</script>


the checkbox should have something like this


<input type="checkbox" name="CB1" onclick="changeBG(this,'tdID')">


I did not test the code so hopefull it works!
Eric

SpiritualStorms
07-01-2004, 11:21 PM
http://65.54.170.250/cgi-bin/linkrd?_lang=EN&lah=2fa474545b0b4e4b5460906f38c9892b&lat=1088683815&hm___action=http%3a%2f%2fwww%2ecodingforums%2ecom%2fshowthread%2ephp%3ft%3d41029%26goto%3dnewpost

DooM_MonkeY
07-01-2004, 11:49 PM
I just fixed a couple problems with Alien51's script, this should work, I tested it




<script type="text/javascript">
function changeBG(cBox,xID){
if(cBox.checked) {
document.getElementById(xID).style.background='red';
}
else
{ document.getElementById(xID).style.background='white';
}
}
</script>


<input type="checkbox" name="CB1" onclick="changeBG(this,'tdID')"><br><BR>

<table height="50px" width="50px" border="1">
<tr height="100%">
<td width="100%" id="tdID"> Moo</td>
</tr>
</table>

Nightfire
07-02-2004, 12:05 AM
http://65.54.170.250/cgi-bin/linkrd?_lang=EN&lah=2fa474545b0b4e4b5460906f38c9892b&lat=1088683815&hm___action=http%3a%2f%2fwww%2ecodingforums%2ecom%2fshowthread%2ephp%3ft%3d41029%26goto%3dnewpost
Think that should be http://codingforums.com/showthread.php?t=41029

MattJakel
07-02-2004, 06:03 AM
Ok thanks!

Matt

glenngv
07-02-2004, 10:25 AM
I just fixed a couple problems with Alien51's script, this should work, I tested it




<script type="text/javascript">
function changeBG(cBox,xID){
if(cBox.checked) {
document.getElementById(xID).style.background='red';
}
else
{ document.getElementById(xID).style.background='white';
}
}
</script>


<input type="checkbox" name="CB1" onclick="changeBG(this,'tdID')"><br><BR>

<table height="50px" width="50px" border="1">
<tr height="100%">
<td width="100%" id="tdID"> Moo</td>
</tr>
</table>


Could be simplified to:

<input type="checkbox" name="CB1" onclick="document.getElementById('tdID').style.backgroundColor=(this.checked)?'red':'white'">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum