?
Solved

set td background color through javascript

Posted on 2002-06-19
18
Medium Priority
?
859 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

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

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.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…
Suggested Courses

801 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