Solved

set td background color through javascript

Posted on 2002-06-19
18
845 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

707 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

17 Experts available now in Live!

Get 1:1 Help Now