asked on

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.

lexxwern

try this.

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

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

chazhs

ASKER

Tried that too, but no luck :(

kadirsiva

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 :).

lexxwern

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()">

chazhs

ASKER

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)

lexxwern

third

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

Michel Plungjan

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>

Michel Plungjan

You cannot change a cell background color using the cell in Netscape4. You would need to use an ilayer and it sucks

Michel Plungjan

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

vk1981

======= for IE:
...
<script language="javascript" type="text/javascript">

</script>
...
<table>
<tr>
<td id="cell" onmouseover="my_mouseover()">Hello</td>
</tr>
</table>
...

======= for NS:
...
<script language="javascript" type="text/javascript">

</script>
...
<layers name="cell" onmouseover="my_mouseover()">
Hello
</layers>
...

Michel Plungjan

VK: Now shove the layer inside the cell and repeat your code

lexxwern

sorry mp.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vk1981

it's not possible to use layers with tables or td...
but u can insert table into layer

kadirsiva

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 :).

lexxwern

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.

chazhs

ASKER

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>
*****************************************