...

View Full Version : Colouring Table BG's with Javascript help



sir pannels
10-26-2006, 03:45 PM
Hi all,

Been doing a bit of JS and have just started playing some IF statements.. and setting variables etc etc.. came up with a question ..

Is it possible to set the BG colour of a straight HTML table cell with JS?

So, IF statement works out if something 'is' something or not, and if it is... sets a colour I can use on just on cell .. For instance, is there a away I can call the variable in the bgcolor='' field of the table, I have done document.write(content) which obviously wipes whole page.. and also printed using a span.. again cant put span syntax in the bgcolor tag...

bit lost

any pointers?
thanks all
Sir P :D

Kor
10-26-2006, 04:02 PM
You may create/change the CSS style attributes (or change some classes). Here's a basic example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
function changeBG(col){
document.getElementById('mytab').style.backgroundColor=col;
}
</script>
</head>
<body>
<table id="mytab" width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br>
<br>
<input type="button" value="red" onclick="changeBG('#FF0000')">
<input type="button" value="blue" onclick="changeBG('#0000CC')">
<input type="button" value="green" onclick="changeBG('#006600')">
</body>
</html>

sir pannels
10-26-2006, 04:47 PM
Thanks Kor your a great help ...

Trying to call a colour change now with an IF... like this ..


var data = 2;
if (data==2){
function changeBG('#FF0000');
}

but it errors the page, object expected..

any ideas what im doing wrong?

thanks :D

sir pannels
10-26-2006, 04:52 PM
ah it was because I used the word function..


var data = 2;
if (data==2){
changeBG('#FF0000');
}

doh silly me.. anyway that doesnt error, but doesnt change the colour...

any ideas whats wrong?

cheers again =]

Kor
10-26-2006, 04:53 PM
var data = 2;
if (data==2){
changeBG('#FF0000');
}

Kor
10-26-2006, 04:57 PM
javascript works like that. Page has elements, elements have properties, properties have values. In order to create/change/remove elements/properies/value, javascript uses methods. Methods are nested in functions. Functions are called by events, following a user's action.

Now, you need a function and an event that means you need to nest

var data = 2;
if (data==2){
changeBG('#FF0000');
}

in a function and you have to call it when an event happens. Which might be that event?

sir pannels
10-26-2006, 05:40 PM
Ah I get you .. yeh it wasnt being called..

I now have

function setCol(){
var data = 2;
if (data=2){
changeBG('#FF0000');
}}


and


<body onload="setCol();">

fantastic.. works great... thanks agian for all your help :)

sirp

Kor
10-26-2006, 06:01 PM
take care:

if (data==2){



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum