table added to div doesn't appear when using IE

[James Black]

I am dynamically generating a table in IE to display some information.
I will probably change it to divs later, but I just want to get it
working properly first.

In my div I have the following as the value of innerHTML:
"<TABLE>
<TR>
<TD id=td6x vAlign=top align=right><IM G height=14 alt=Required
src=\"/images/ci/icons/required.gif\" width=7 border=0
vAlign=\"top\"> <INPUT id=anchor6x width=0 size=10
readonly=\"read only\"></TD>
<TD><A id=urlanchor6x href=\"#ignore6 \"><IMG height=24
src=\"/images/ci/icons/calendar_s.gif\ " width=24 border=0
vAlign=\"bottom \"></A></TD></TR></TABLE>"

But, when I exit the function that generated this, there is nothing
displayed in IE, for what I wanted added.
This is the innerHTML value for the parent of the div above:

"<A name=#ignore6></A>
<DIV id=datespan6 style=\"VISIBIL ITY: visible\" _extended=\"tru e\">
<TABLE>
<TR>
<TD id=td6x vAlign=top align=right><IM G height=14 alt=Required
src=\"/images/ci/icons/required.gif\" width=7 border=0
vAlign=\"top\"> <INPUT id=anchor6x width=0 size=10
readonly=\"read only\"></TD>
<TD><A id=urlanchor6x href=\"#ignore6 \"><IMG height=24
src=\"/images/ci/icons/calendar_s.gif\ " width=24 border=0
vAlign=\"bottom \"></A></TD></TR></TABLE></DIV><INPUT id=lda6x
type=hidden _extended=\"tru e\"> "

Everything works fine in Firefox 1.5, but not in IE.

This is the code that generated the table:
var anchorName = "anchor" + indx + "x";
var tdChildEl = document.create Element("td");
tdChildEl.align = "right";
tdChildEl.vAlig n = "top";
tdChildEl.id = "td" + indx + "x";
var imgelem = document.create Element('img');
imgelem.src = "/images/ci/icons/required.gif";
imgelem.alt = "Required";
imgelem.vAlign = "top";
imgelem.border = "0";
imgelem.height = "14";
imgelem.width = "7";
tdChildEl.appen dChild(imgelem) ;

var inputChildEl =
document.create Element("input" );
inputChildEl.ty pe = "text";
inputChildEl.na me="date" + indx;
inputChildEl.va lue = $('lda' + indx +
'x').value;
inputChildEl.id = anchorName;
inputChildEl.on mouseout =
ModifyGrades.ha ndlemouseout;
inputChildEl.on mouseover =
ModifyGrades.ha ndlemouseover;
inputChildEl.on click = ModifyGrades.da teSelect;
inputChildEl.wi dth = "10em";
inputChildEl.si ze = 10;

inputChildEl.se tAttribute("rea donly","readonl y");

tdChildEl.appen dChild(inputChi ldEl);
var rowelem = document.create Element('tr');
rowelem.appendC hild(tdChildEl) ;

var aChildEl = document.create Element("a");
aChildEl.href = "#ignore" + indx;
aChildEl.name = anchorName;
aChildEl.id = "url" + anchorName;
aChildEl.onclic k = function(){
ModifyGrades.ca llCalendarIcon( document.forms[0]["date"+indx], "url" +
anchorName); return false; }
var calImgEl = document.create Element('img');
calImgEl.src =
"/images/ci/icons/calendar_s.gif" ;
calImgEl.vAlign = "bottom";
calImgEl.border = "0";
aChildEl.append Child(calImgEl) ;
tdChildEl = document.create Element('td');
tdChildEl.appen dChild(aChildEl );
rowelem.appendC hild(tdChildEl) ;

var tableelem =
document.create Element('table' );
tableelem.appen dChild(rowelem) ;
span.appendChil d(tableelem);
span.style.visi bility="visible ";

Any idea on what I might be doing wrong?

Thank you for any help.

[RobG]

James Black said on 28/04/2006 3:25 AM AEST:

I am dynamically generating a table in IE to display some information.
I will probably change it to divs later, but I just want to get it
working properly first.

In my div I have the following as the value of innerHTML:
"<TABLE>
<TR>
<TD id=td6x vAlign=top align=right><IM G height=14 alt=Required
src=\"/images/ci/icons/required.gif\" width=7 border=0
vAlign=\"top\"> <INPUT id=anchor6x width=0 size=10
readonly=\"read only\"></TD>
<TD><A id=urlanchor6x href=\"#ignore6 \"><IMG height=24
src=\"/images/ci/icons/calendar_s.gif\ " width=24 border=0
vAlign=\"bottom \"></A></TD></TR></TABLE>"

But, when I exit the function that generated this, there is nothing
displayed in IE, for what I wanted added.
This is the innerHTML value for the parent of the div above:

"<A name=#ignore6></A>
<DIV id=datespan6 style=\"VISIBIL ITY: visible\" _extended=\"tru e\">
<TABLE>
<TR>
<TD id=td6x vAlign=top align=right><IM G height=14 alt=Required
src=\"/images/ci/icons/required.gif\" width=7 border=0
vAlign=\"top\"> <INPUT id=anchor6x width=0 size=10
readonly=\"read only\"></TD>
<TD><A id=urlanchor6x href=\"#ignore6 \"><IMG height=24
src=\"/images/ci/icons/calendar_s.gif\ " width=24 border=0
vAlign=\"bottom \"></A></TD></TR></TABLE></DIV><INPUT id=lda6x
type=hidden _extended=\"tru e\"> "

Everything works fine in Firefox 1.5, but not in IE.

This is the code that generated the table:
var anchorName = "anchor" + indx + "x";
When posting code, indent with 2 or 4 spaces, manually wrap at about 70
characters to prevent auto-wrapping introducing errors.

var tdChildEl = document.create Element("td");
tdChildEl.align = "right";
tdChildEl.vAlig n = "top";
tdChildEl.id = "td" + indx + "x";
var imgelem = document.create Element('img');
imgelem.src = "/images/ci/icons/required.gif";
imgelem.alt = "Required";
imgelem.vAlign = "top";
imgelem.border = "0";
imgelem.height = "14";
imgelem.width = "7";
tdChildEl.appen dChild(imgelem) ;

var inputChildEl =
document.create Element("input" );
inputChildEl.ty pe = "text";
inputChildEl.na me="date" + indx;
inputChildEl.va lue = $('lda' + indx +
'x').value;
The use of $(...) indicates the use of prototype.js, it seems you don't
really need it here.

inputChildEl.id = anchorName;
inputChildEl.on mouseout =
ModifyGrades.ha ndlemouseout;
inputChildEl.on mouseover =
ModifyGrades.ha ndlemouseover;
inputChildEl.on click = ModifyGrades.da teSelect;
inputChildEl.wi dth = "10em";
inputChildEl.si ze = 10;
It's not a good idea to use deprecated element attributes, use CSS style
attributes instead.


inputChildEl.se tAttribute("rea donly","readonl y");
A recent thread discussed setAttribute vs. direct access to DOM object
properties. Some browsers have issues with setAttribute, so just use:

inputChildEl.re adonly = true;


tdChildEl.appen dChild(inputChi ldEl);
var rowelem = document.create Element('tr');
1. Create the table here and then the row using:

var tableelem = document.create Element('table' );
var rowelem = tableelem.inser tRow(-1);
For reference:

<URL:http://developer.mozil la.org/en/docs/DOM:table.inser tRow>
See below...

rowelem.appendC hild(tdChildEl) ;

var aChildEl = document.create Element("a");
aChildEl.href = "#ignore" + indx;
aChildEl.name = anchorName;
aChildEl.id = "url" + anchorName;
aChildEl.onclic k = function(){
ModifyGrades.ca llCalendarIcon( document.forms[0]["date"+indx], "url" +
anchorName); return false; }
var calImgEl = document.create Element('img');
calImgEl.src =
"/images/ci/icons/calendar_s.gif" ;
calImgEl.vAlign = "bottom";
Deprecated attributes again...

calImgEl.border = "0";
aChildEl.append Child(calImgEl) ;
tdChildEl = document.create Element('td');
tdChildEl.appen dChild(aChildEl );
rowelem.appendC hild(tdChildEl) ;
More efficient replace the above 3 lines with:

var tdChildEl = rowelem.insertC ell(-1);
tdChildEl.appen dChild(aChildEl );

var tableelem =
document.create Element('table' );
tableelem.appen dChild(rowelem) ;
In IE you can't add rows directly to a table using appendChild, you must
add them to a tbody. To save creating a tbody, appending it, etc.
create the table and row as indicated at 1. above using insertRow.

span.appendChil d(tableelem);
span.style.visi bility="visible ";

Where is 'span' defined? If it's a span, it can't have a table as a
child - the result of the above may be unpredictable.

There may be other errors, I haven't tested it.

--
Rob
Group FAQ: <URL:http://www.jibbering.c om/FAQ>