set td background color through javascript

I need to set the <td bgcolor> through javascript. Need a code that works on Netscape 4.78+  and IE5+

Tried this, but did not work

function colr() {
     var c = "#5E3182";
     return c;
}

 <td width="144" bgcolor="return colr">

Any suggestions ?
Thanks.
chazhsAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Well I make mistakes too ;-(

</head>
<body>
<table>
<script>
document.write('<tr><td width="144" id="cellA" bgColor="'+col+'">Hello</td></tr>')
</script>
</table>
</body>
</html>
0
 
lexxwernCommented:
try this.



function colr() {
    var c = "#5E3182";
    return c;
}

<td width="144" bgcolor="colr()">
0
 
chazhsAuthor Commented:
Tried that too, but no luck :(
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
kadirsivaCommented:
Instead of this u can use CSS for it.
<html>
<head><title>CSS Example</title>
<style>
TD {
     BACKGROUND-COLOR=#FF00FF;
}
</style>
</head>
<body>
<table>
<tr><td>First</td></tr>
<tr><td>Second</td></tr>
<tr><td>Third</td></tr>
</table>
</body>
</html>
Have a nice day :).
0
 
lexxwernCommented:
kadirsiva, he wants to use js since there is a good enough reason for it.



 chazhs try this.


function colr() {
window.document.all.TheRow.style.background-color='#5E3182';
}




<td width="144" onload="colr()">
0
 
chazhsAuthor Commented:
Css will not work since I want the bgcolor only for some columns, not all.
Sorry I did not mention it before.

lexxwern,  how do I mention "TheRow"  in my <td> ?
 Can you show me  how my <td> tag should look like ?


I actually tried it,

<td width="144" id=thecol bgcolor="colr()">

and
function colr() {
                    window.document.thecol.style.background-color='#5E3182';
                    }

 but  does not work, and the colum just shows red color(#FF0000)

0
 
lexxwernCommented:

<td width="144" id="TheCol" onload="colr()">
0
 
thirdCommented:
<html>
<head>
<script>
function colr(){
  document.all['thecol'].style.backgroundColor='#5E3182';
}
</script>
</head>
<body>
<table border="1">
<tr><td id="thecol" style="background-color:#FF0000;><a href="#" onclick="colr();return false;">change color</a></td></tr>
</table>
</body>
</html>
0
 
Michel PlungjanIT ExpertCommented:
Lexxwern - please make an effort to see if your code works - it seems you just comment for the sake of commenting.

It is not valid JS to have

...style.background-color

Since the JS syntax is backgroundColor

also a cell does not have an onLoad handler

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/events/onload.asp


<html>
<head>
     <title>Untitled</title>
<script>
function colr(theCell) {
  theCell.style.backgroundColor='#5E3182';
}
</script>
 
</head>

<body onLoad="colr(document.getElementById('cellA'))">
<table><tr>
<td width="144" id="cellA">Hello</td>
</tr></table>
</body>
</html>
0
 
Michel PlungjanIT ExpertCommented:
You cannot change a cell background color using the cell in Netscape4. You would need to use an ilayer and it sucks
0
 
Michel PlungjanIT ExpertCommented:
However you COULD do this:


<html>
<head>
    <title>Untitled</title>
<script>
col = '#5E3182'
</script>
 
</head>
<body>
<table>
<script>
document.write(<tr><td width="144" id="cellA" bgColor="'+col+'">Hello</td></tr>')
</table>
</body>
</html>



or use bgColor="&{col}" for netscape
0
 
vk1981Commented:
======= for IE:
...
<script language="javascript" type="text/javascript">
<!--
   function my_mouseover ()
   {
      document.all.cell.style.backgroundColor = "red";
   }
//-->
</script>
...
<table>
<tr>
<td id="cell" onmouseover="my_mouseover()">Hello</td>
</tr>
</table>
...

======= for NS:
...
<script language="javascript" type="text/javascript">
<!--
   function my_mouseover ()
   {
       document.layers.cell.bgColor = "red";
   }
//-->
</script>
...
<layers name="cell" onmouseover="my_mouseover()">
Hello
</layers>
...
0
 
Michel PlungjanIT ExpertCommented:
VK: Now shove the layer inside the cell and repeat your code
0
 
lexxwernCommented:
sorry mp.
0
 
vk1981Commented:
it's not possible to use layers with tables or td...
but u can insert table into layer
0
 
kadirsivaCommented:
Hi then u use id tag instead of TD since u use javascript for the columns u need to be in that color us use like this.

<html>
<head><title>CSS Example</title>
<style>
.fir {
    BACKGROUND-COLOR=#FF00FF;
}
.sec {
    BACKGROUND-COLOR=#0000FF;
}
.thi {
    BACKGROUND-COLOR=#FF0000;
}
</style>
</head>
<body>
<table>
<tr><td id="fir">First</td></tr>
<tr><td id="sec">Second</td></tr>
<tr><td id="thi">Third</td></tr>
</table>
</body>
</html>
I think thsi one will be very easy to handle. Have a nice day :).
0
 
lexxwernCommented:
kadirsiva,

1. this is not asked. the user has mentioned this.
2. you css is faulty. # are to be used for ids and . to be used for classes.
0
 
chazhsAuthor Commented:
Thanks everyone. Mplungians code worked.
Thanks for your time!


****************************************

<html>
<head>
   <title>Untitled</title>
<script language=Javascript>
var col = "green";
</script>
</head>

<body>
<table>
<script language=Javascript>
document.write("<tr><td width=144 bgColor=" +col +">Hello</td></tr>")
</script>
</table>
</body>
</html>
*****************************************
0
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.

All Courses

From novice to tech pro — start learning today.