Can’t change <td> bgcolor?

@furious70Dec 15.2003

given this code in a script tag in a coldFusion template:

(snip)
var oracle_number_cell = document.getElementById(‘oracle_number_cell’);

(snip)

oracle_number_cell.setAttribute(‘width’,’33%’);
oracle_number_cell.setAttribute(‘bgcolor’,’white’);
oracle_number_cell.setAttribute(‘align’,’center’);

(snip)

var tdText=document.createTextNode(‘Oracle Order Number: ‘);
var oracle_order_num = document.createElement(‘input’);
oracle_order_num.setAttribute(‘type’,’text’);
oracle_order_num.setAttribute(‘name’,’oracle_order_num’);
oracle_order_num.setAttribute(‘value’,”);
oracle_order_num.setAttribute(‘size’,’7′);
oracle_order_num.setAttribute(‘maxlength’,’7′);
oracle_number_cell.appendChild(tdText);
oracle_number_cell.appendChild(oracle_order_num);

everything works except the changing of the background color to white. On this particular entry page, the user is given a choice, if this is a particular type of order, the oracle order number is required, by default it is not. On the default screen the td tag is gray with width=1, used as a layout divider. When the user clicks ‘yes’ for the particular order type, the td’s in this row resize and the code above is run. Am I missing something obvious about the bgcolor?

to post a comment

JavaScript

12 Comments(s) _↴

@fredmvDec 15.2003 — #Try this:oracle_number_cell.setAttribute('style', 'background-color: #fff;');

@furious70authorDec 15.2003 — #I just tried these 4, none worked. None gave a JS error either, the background just stays gray

oracle_number_cell.setAttribute('style', 'background-color: #ffffff;');

oracle_number_cell.setAttribute('style', 'background-color: #ffffff');

oracle_number_cell.setAttribute('style', 'background-color: #fff;');

oracle_number_cell.setAttribute('style', 'background-color: #fff');

@fredmvDec 15.2003 — #Interesting. So the other two lines [b]do[/b] in fact work (set the [font=courier]align[/font] to center and the [font=courier]width[/font] to 33%)? Maybe after you try the code I suggested (or the code you already had), try reading the value to see if it was actually set by doing something like this:alert(oracle_number_cell.style.backgroundColor);

@furious70authorDec 15.2003 — #that nets me a blank alert box. If I put back in my .bgcolor line and then do

alert(oracle_number_cell.bgcolor);

I get white in the alert box, but the cell stays gray.

But yes, I get a resize of the box and the text and input are centered in the cell

Here's the code that initally creates the cell, maybe a clue here?

[code=php]
 
 <!--- decide if should put oracle cell in (for back tracking for changes --->
 <cfif IsDefined("session.#attributes.order#.oracle_order_num") AND 
 session["#attributes.order#"].oracle_order_num neq "">
 <script>
 var smp_cell = document.getElementById('smp_cell');
 smp_cell.setAttribute('width','33%');
 </script>
 <td width = "33%" align="center" id="oracle_number_cell" nowrap>
 Oracle Order Number: <input type="text" name="oracle_order_num" size="7" 
 value="#session["#attributes.order#"].oracle_order_num#" maxlength="7"> 
 </td>
 <cfelse>
 <td width="1" bgcolor="gray" id="oracle_number_cell"></td>
 </cfif>
 
 
 [/code]

@fredmvDec 15.2003 — #Here's some sample code I put together:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
 
 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;untitled&lt;/title&gt;
 &lt;meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /&gt;
 &lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
 function go()
 {
 document.getElementsByTagName('td')[0].style.backgroundColor = '#fff';
 }
 //]]&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;table style="width: 100%;"&gt;
 &lt;td style="background-color: gray; width: 50%;"&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td style="width: 50%;"&gt;&lt;/td&gt;
 &lt;/table&gt;
 &lt;a href="#" onclick="go();"&gt;Switch the background-color to white.&lt;/a&gt;
 &lt;/body&gt;
 &lt;/html&gt;

It of course proves that it's possible. Maybe try looking over this code and see if you can use it to improve your current code? For example, try using [font=courier]oracle_number_cell.style.backgroundColor = 'fff'[/font] to switch the background-color to white. Although, in theory, those other two pieces of code should've worked correctly.

@furious70authorDec 15.2003 — #well, one thing I've been wondering about is the interaction between static and dynamically created objects. I've wondered if something is created statically if it might not be totally available through getElementById? It should be available, but I've wondered if syntaxes between the 2 cause problems. For instance, using bgcolor statically, but you suggesting going about it from the style attr.

I will see if something along that line, coupled with your example, makes any difference

@furious70authorDec 15.2003 — #after looking at it more, it appears none of the setAttribute stuff in relation to that table cell and the elements inside it are working. I am doing some other setAttributes to other objects and they work ok. I'm going to work on pulling this stuff out into a script that can be shared, it's currently in an internal app that I unfortunely can't give a URL to. Probably won't get to that till 2morrow, but I'll bump the thread then with it.

@fredmvDec 15.2003 — #I understand. Good luck with everything.

@furious70authorDec 15.2003 — #this worked:

oracle_number_cell.style.backgroundColor = 'fff'

but not

oracle_number_cell.style.align = 'center'

what attributes fall under style?

I can do this static style stuff for the td, but for the text and input box I have to actually create them and append them to the td. But if I can get a handle on syntax as above to do the width, color, align, and nowrap I may be in business. Suggestions on the remaining 3?

@furious70authorDec 16.2003 — #bump.

Help on understanding what can go under the style attribute as in my last post would be handy. I haven't really ever worked with css's, so I'm not very familiar with that style of formating, I'm used to straight out using the attributes in the tag itself.

@furious70authorDec 16.2003 — #it looks like I've stumbled on the right combination to allow the toggling of this TD cell. I set it up like this:

[code=php]<cfif IsDefined("session.#attributes.order#.oracle_order_num") AND 
 session["#attributes.order#"].oracle_order_num neq "">
 <script>
 var smp_cell = document.getElementById('smp_cell');
 smp_cell.setAttribute('width','33%');
 </script>
 <td style="background-color: white; width: 33%; align: center;" id="oracle_number_cell" nowrap>
 Oracle Order Number: <input type="text" name="oracle_order_num" size="7" 
 value="#session["#attributes.order#"].oracle_order_num#" maxlength="7"> 
 </td>
 <cfelse>
 <td style="background-color: gray; width: 1; align: center;" id="oracle_number_cell" nowrap></td>
 </cfif>[/code]

then do stuff like this in the JS:

[code=php]
 oracle_number_cell.style.backgroundColor = 'fff';
 oracle_number_cell.style.align = 'center';
 oracle_number_cell.style.width = '33%';
 
 [/code]

I still have a problem with removing children in the toggle, but I'm going to post a new thread for that Q

@Khalid_AliDec 29.2003 — #there is no aling property in CSS.

for align you will need

text-align:center;

The problem you have is only with IE,setAttribute works perfectly with NS(mozilla based) browsers

Also in #JavaScript _↴

How can I make a link open a new window withOUT producing a security alert?If...else Statement, Cant get it to work?Order of JS files

Success!

Help @furious70 spread the word by sharing this article on Twitter...

Tweet This

Can’t change <td> bgcolor?

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Can’t change <td> bgcolor?

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴