• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 861
  • Last Modified:

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.
0
chazhs
Asked:
chazhs
  • 5
  • 5
  • 3
  • +3
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
Michel PlungjanIT 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
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 5
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now