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><IMG height=14 alt=Required
src=\"/images/ci/icons/required.gif\" width=7 border=0
vAlign=\"top\"><INPUT id=anchor6x width=0 size=10
readonly=\"readonly\"></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=\"VISIBILITY: visible\" _extended=\"true\">
<TABLE>
<TR>
<TD id=td6x vAlign=top align=right><IMG height=14 alt=Required
src=\"/images/ci/icons/required.gif\" width=7 border=0
vAlign=\"top\"><INPUT id=anchor6x width=0 size=10
readonly=\"readonly\"></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=\"true\"> "

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.createElement("td");
tdChildEl.align = "right";
tdChildEl.vAlign = "top";
tdChildEl.id = "td" + indx + "x";
var imgelem = document.createElement('img');
imgelem.src = "/images/ci/icons/required.gif";
imgelem.alt = "Required";
imgelem.vAlign = "top";
imgelem.border = "0";
imgelem.height = "14";
imgelem.width = "7";
tdChildEl.appendChild(imgelem);

var inputChildEl =
document.createElement("input");
inputChildEl.type = "text";
inputChildEl.name="date" + indx;
inputChildEl.value = $('lda' + indx +
'x').value;
inputChildEl.id = anchorName;
inputChildEl.onmouseout =
ModifyGrades.handlemouseout;
inputChildEl.onmouseover =
ModifyGrades.handlemouseover;
inputChildEl.onclick = ModifyGrades.dateSelect;
inputChildEl.width = "10em";
inputChildEl.size = 10;

inputChildEl.setAttribute("readonly","readonly");

tdChildEl.appendChild(inputChildEl);
var rowelem = document.createElement('tr');
rowelem.appendChild(tdChildEl);

var aChildEl = document.createElement("a");
aChildEl.href = "#ignore" + indx;
aChildEl.name = anchorName;
aChildEl.id = "url" + anchorName;
aChildEl.onclick = function(){
ModifyGrades.callCalendarIcon(document.forms[0]["date"+indx], "url" +
anchorName); return false; }
var calImgEl = document.createElement('img');
calImgEl.src =
"/images/ci/icons/calendar_s.gif";
calImgEl.vAlign = "bottom";
calImgEl.border = "0";
aChildEl.appendChild(calImgEl);
tdChildEl = document.createElement('td');
tdChildEl.appendChild(aChildEl);
rowelem.appendChild(tdChildEl);

var tableelem =
document.createElement('table');
tableelem.appendChild(rowelem);
span.appendChild(tableelem);
span.style.visibility="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><IMG height=14 alt=Required
src=\"/images/ci/icons/required.gif\" width=7 border=0
vAlign=\"top\"><INPUT id=anchor6x width=0 size=10
readonly=\"readonly\"></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=\"VISIBILITY: visible\" _extended=\"true\">
<TABLE>
<TR>
<TD id=td6x vAlign=top align=right><IMG height=14 alt=Required
src=\"/images/ci/icons/required.gif\" width=7 border=0
vAlign=\"top\"><INPUT id=anchor6x width=0 size=10
readonly=\"readonly\"></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=\"true\"> "

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.createElement("td");
tdChildEl.align = "right";
tdChildEl.vAlign = "top";
tdChildEl.id = "td" + indx + "x";
var imgelem = document.createElement('img');
imgelem.src = "/images/ci/icons/required.gif";
imgelem.alt = "Required";
imgelem.vAlign = "top";
imgelem.border = "0";
imgelem.height = "14";
imgelem.width = "7";
tdChildEl.appendChild(imgelem);

var inputChildEl =
document.createElement("input");
inputChildEl.type = "text";
inputChildEl.name="date" + indx;
inputChildEl.value = $('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.onmouseout =
ModifyGrades.handlemouseout;
inputChildEl.onmouseover =
ModifyGrades.handlemouseover;
inputChildEl.onclick = ModifyGrades.dateSelect;
inputChildEl.width = "10em";
inputChildEl.size = 10;

It's not a good idea to use deprecated element attributes, use CSS style
attributes instead.

inputChildEl.setAttribute("readonly","readonly");

A recent thread discussed setAttribute vs. direct access to DOM object
properties. Some browsers have issues with setAttribute, so just use:

inputChildEl.readonly = true;

tdChildEl.appendChild(inputChildEl);
var rowelem = document.createElement('tr');

1. Create the table here and then the row using:

var tableelem = document.createElement('table');
var rowelem = tableelem.insertRow(-1);


For reference:

<URL:http://developer.mozilla.org/en/docs/DOM:table.insertRow>


See below...

rowelem.appendChild(tdChildEl);

var aChildEl = document.createElement("a");
aChildEl.href = "#ignore" + indx;
aChildEl.name = anchorName;
aChildEl.id = "url" + anchorName;
aChildEl.onclick = function(){
ModifyGrades.callCalendarIcon(document.forms[0]["date"+indx], "url" +
anchorName); return false; }
var calImgEl = document.createElement('img');
calImgEl.src =
"/images/ci/icons/calendar_s.gif";
calImgEl.vAlign = "bottom";

Deprecated attributes again...

calImgEl.border = "0";
aChildEl.appendChild(calImgEl);
tdChildEl = document.createElement('td');
tdChildEl.appendChild(aChildEl);
rowelem.appendChild(tdChildEl);

More efficient replace the above 3 lines with:

var tdChildEl = rowelem.insertCell(-1);
tdChildEl.appendChild(aChildEl);

var tableelem =
document.createElement('table');
tableelem.appendChild(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.appendChild(tableelem);
span.style.visibility="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.