By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,654 Members | 1,575 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,654 IT Pros & Developers. It's quick & easy.

change bgcolor of td?

P: n/a
Hi,

How can I change the bg color of a table td by javascript? The color is a variable.

e.g.
<head>
<script>
color1="#FF0000";
</script>
</head>

<body>
<table>
<tr>
<td onMouseOver='this.bgColor=color1'>AAA</td>
<td>BBB</td>
</tr>
</table>
</body>

However, I want the color be set when the page is loaded, but not after the mouse events.
Thank you very much.

Frederick

Jul 23 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a

"chlaw" <ch***@cse.cuhk.edu.hk> ???????/???????? ? ???????? ?????????:
news:40***************@cse.cuhk.edu.hk...
Hi,

How can I change the bg color of a table td by javascript? The color is a variable.
e.g.
<head>
<script>
color1="#FF0000";
</script>
</head>

<body>
<table>
<tr>
<td onMouseOver='this.bgColor=color1'>AAA</td>
<td>BBB</td>
</tr>
</table>
</body>

However, I want the color be set when the page is loaded, but not after the mouse events. Thank you very much.

Frederick

<script>
color1='#FAFAFA';
color2='#EEEEEE';
coloradd="'"+color2+"'";
document.write('<td STYLE="background-color:'+color2+'"
onMouseOut="this.style.backgroundColor='+"'"+color 2+"'"+'"
onMouseOver="this.style.backgroundColor='+"'"+colo r1+"'"+'">some
text</td>');
</script>
Jul 23 '05 #2

P: n/a

"Dennis Biletsky" <uf***@ua.fm> сообщил/сообщила в новостях следующее:
news:c9*********@fortress.intercom.net.ua...

"chlaw" <ch***@cse.cuhk.edu.hk> ???????/???????? ? ???????? ?????????:
news:40***************@cse.cuhk.edu.hk... [snip] <script>
color1='#FAFAFA';
color2='#EEEEEE';
coloradd="'"+color2+"'";
document.write('<td STYLE="background-color:'+color2+'"
onMouseOut="this.style.backgroundColor='+"'"+color 2+"'"+'"
onMouseOver="this.style.backgroundColor='+"'"+colo r1+"'"+'">some
text</td>');
</script>

Sorry "coloradd row" unnecessary. It's mistake ;)
Jul 23 '05 #3

P: n/a
Dennis Biletsky wrote:
"Dennis Biletsky" <uf***@ua.fm> сообщил/сообщила в новостях следующее:
news:c9*********@fortress.intercom.net.ua...

"chlaw" <ch***@cse.cuhk.edu.hk> ???????/???????? ? ???????? ?????????:
news:40***************@cse.cuhk.edu.hk...

[snip]
<script>
color1='#FAFAFA';
color2='#EEEEEE';
coloradd="'"+color2+"'";
document.write('<td STYLE="background-color:'+color2+'"
onMouseOut="this.style.backgroundColor='+"'"+color 2+"'"+'"
onMouseOver="this.style.backgroundColor='+"'"+colo r1+"'"+'">some
text</td>');
</script>

Sorry "coloradd row" unnecessary. It's mistake ;)


Thanks, Dennis.

However, in this way, do I need to move all my html tags into "document.write();" statements ?
I want to minimize the modification on my html file...

Frederick

Jul 23 '05 #4

P: n/a
chlaw wrote:
Dennis Biletsky wrote:
"Dennis Biletsky" <uf***@ua.fm> сообщил/сообщила в новостях следующее:
news:c9*********@fortress.intercom.net.ua...

"chlaw" <ch***@cse.cuhk.edu.hk> ???????/???????? ? ???????? ?????????:
news:40***************@cse.cuhk.edu.hk...

[snip]
<script>
color1='#FAFAFA';
color2='#EEEEEE';
coloradd="'"+color2+"'";
document.write('<td STYLE="background-color:'+color2+'"
onMouseOut="this.style.backgroundColor='+"'"+color 2+"'"+'"
onMouseOver="this.style.backgroundColor='+"'"+colo r1+"'"+'">some
text</td>');
</script>

Sorry "coloradd row" unnecessary. It's mistake ;)


Thanks, Dennis.

However, in this way, do I need to move all my html tags into "document.write();" statements ?
I want to minimize the modification on my html file...

Frederick


O, I got it now. Just move the line of document.wirte() inside the <tr></tr>... Thanks.

Jul 23 '05 #5

P: n/a
chlaw <ch***@cse.cuhk.edu.hk> wrote in message news:<40***************@cse.cuhk.edu.hk>...
Hi,

How can I change the bg color of a table td by javascript? The color is a variable.

e.g.
<head>
<script>
color1="#FF0000";
</script>
</head>

<body>
<table>
<tr>
<td onMouseOver='this.bgColor=color1'>AAA</td>
<td>BBB</td>
</tr>
</table>
</body>

However, I want the color be set when the page is loaded, but not after the mouse events.
Thank you very much.

Frederick


----------------------------------------------------------------------
Give the desired cell an id name (<TD id="ACELL">xxx</td>

Then, in the javascript, in whatever event you desire (I think you
want it in the onload event in the <BODY> tag) have a line

document.all.ACELL.style.backgroundColor = varColor, where varColor
is your variable color
Jul 23 '05 #6

P: n/a
bruce wrote:
chlaw <ch***@cse.cuhk.edu.hk> wrote in message news:<40***************@cse.cuhk.edu.hk>...
Hi,

How can I change the bg color of a table td by javascript? The color is a variable.

e.g.
<head>
<script>
color1="#FF0000";
</script>
</head>

<body>
<table>
<tr>
<td onMouseOver='this.bgColor=color1'>AAA</td>
<td>BBB</td>
</tr>
</table>
</body>

However, I want the color be set when the page is loaded, but not after the mouse events.
Thank you very much.

Frederick


----------------------------------------------------------------------
Give the desired cell an id name (<TD id="ACELL">xxx</td>

Then, in the javascript, in whatever event you desire (I think you
want it in the onload event in the <BODY> tag) have a line

document.all.ACELL.style.backgroundColor = varColor, where varColor
is your variable color


Thanks! It's actually what I want.

Jul 23 '05 #7

P: n/a
bruce wrote:
chlaw <ch***@cse.cuhk.edu.hk> wrote in message news:<40***************@cse.cuhk.edu.hk>...


<--snip-->
However, I want the color be set when the page is loaded, but not after the mouse events.
Thank you very much.

Frederick

----------------------------------------------------------------------
Give the desired cell an id name (<TD id="ACELL">xxx</td>

Then, in the javascript, in whatever event you desire (I think you
want it in the onload event in the <BODY> tag) have a line

document.all.ACELL.style.backgroundColor = varColor, where varColor
is your variable color


Why not document.getElementById('ACELL').style.backgroundC olor =
so that it works in other browsers as well?

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/
Jul 23 '05 #8

P: n/a
Randy Webb <hi************@aol.com> wrote in message news:<Lt********************@comcast.com>...
bruce wrote:
chlaw <ch***@cse.cuhk.edu.hk> wrote in message news:<40***************@cse.cuhk.edu.hk>...


<--snip-->
However, I want the color be set when the page is loaded, but not after the mouse events.
Thank you very much.

Frederick

----------------------------------------------------------------------
Give the desired cell an id name (<TD id="ACELL">xxx</td>

Then, in the javascript, in whatever event you desire (I think you
want it in the onload event in the <BODY> tag) have a line

document.all.ACELL.style.backgroundColor = varColor, where varColor
is your variable color


Why not document.getElementById('ACELL').style.backgroundC olor =
so that it works in other browsers as well?

My code doesn't recognize any other browsers :) Our systems
assume IE only, so all my answers will too. I should specify that.
Thanks for the additional accuracy.
Jul 23 '05 #9

P: n/a
Dennis Biletsky wrote:
<script>
color1='#FAFAFA';
color2='#EEEEEE';
coloradd="'"+color2+"'";
document.write('<td STYLE="background-color:'+color2+'"
onMouseOut="this.style.backgroundColor='+"'"+color 2+"'"+'"
onMouseOver="this.style.backgroundColor='+"'"+colo r1+"'"+'">some
text</td>');
</script>


This is invalid HTML. The "script" element misses a "type" attribute
(with the value "text/javascript") and the element it must not occur
as child of "table" or "thead", "tbody", "tfoot" or "tr". Do that
server-side. Anything else is considered harmful.

As for the onmouse* event handlers, this is inefficient, unless only
one table cell is going to be highlighted. I think I have posted a
combination of CSS td:hover and an event listener for the parent "table"
element here previously.
PointedEars
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.