PDA

Click to See Complete Forum and Search --> : Can't change <td> bgcolor?

furious70
12-15-2003, 02:09 PM
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?
fredmv
12-15-2003, 02:23 PM
Try this:oracle_number_cell.setAttribute('style', 'background-color: #fff;');
furious70
12-15-2003, 02:30 PM
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');
fredmv
12-15-2003, 02:35 PM
Interesting. So the other two lines do in fact work (set the align to center and the width 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);
furious70
12-15-2003, 02:54 PM
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?



<!--- 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>
fredmv
12-15-2003, 03:09 PM
Here's some sample code I put together:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
function go()
{
document.getElementsByTagName('td')[0].style.backgroundColor = '#fff';
}
//]]>
</script>
</head>
<body>
<table style="width: 100%;">
<td style="background-color: gray; width: 50%;">&nbsp;</td>
<td style="width: 50%;"></td>
</table>
<a href="#" onclick="go();">Switch the background-color to white.</a>
</body>
</html>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 oracle_number_cell.style.backgroundColor = 'fff' to switch the background-color to white. Although, in theory, those other two pieces of code should've worked correctly.
furious70
12-15-2003, 03:13 PM
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
furious70
12-15-2003, 03:32 PM
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.
fredmv
12-15-2003, 03:35 PM
I understand. Good luck with everything.
furious70
12-15-2003, 03:41 PM
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?
furious70
12-16-2003, 09:02 AM
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.
furious70
12-16-2003, 10:57 AM
it looks like I've stumbled on the right combination to allow the toggling of this TD cell. I set it up like this:


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


then do stuff like this in the JS:

oracle_number_cell.style.backgroundColor = 'fff';
oracle_number_cell.style.align = 'center';
oracle_number_cell.style.width = '33%';



I still have a problem with removing children in the toggle, but I'm going to post a new thread for that Q
Khalid Ali
12-29-2003, 09:15 AM
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