Solved

set td background color through javascript

Posted on 2002-06-19
18
846 Views
Last Modified: 2012-06-27
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
Comment
Question by:chazhs
  • 5
  • 5
  • 3
  • +3
18 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 7094510
try this.



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

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

Author Comment

by:chazhs
ID: 7094522
Tried that too, but no luck :(
0
 

Expert Comment

by:kadirsiva
ID: 7094523
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 7094537
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
 

Author Comment

by:chazhs
ID: 7094582
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 7094592

<td width="144" id="TheCol" onload="colr()">
0
 
LVL 30

Expert Comment

by:third
ID: 7094704
<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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 7094936
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 7094941
You cannot change a cell background color using the cell in Netscape4. You would need to use an ilayer and it sucks
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 7094945
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
 

Expert Comment

by:vk1981
ID: 7095068
======= 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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 7095116
VK: Now shove the layer inside the cell and repeat your code
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7095159
sorry mp.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 50 total points
ID: 7095201
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
 

Expert Comment

by:vk1981
ID: 7095300
it's not possible to use layers with tables or td...
but u can insert table into layer
0
 

Expert Comment

by:kadirsiva
ID: 7095581
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 7095623
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
 

Author Comment

by:chazhs
ID: 7096858
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now