table added dynamically to div span on ie doesn't appear

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

[Randy Webb]

James Black said the following on 4/27/2006 1:22 PM:

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.
<snip>
Any idea on what I might be doing wrong?

You can't appendChild a TR to a TABLE tag, you have to append it to a
TBODY and IE won't let you do it any other way.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[RobG]

Randy Webb said on 28/04/2006 9:34 AM AEST:

James Black said the following on 4/27/2006 1:22 PM:

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.

<snip>

Any idea on what I might be doing wrong?

You can't appendChild a TR to a TABLE tag, you have to append it to a
TBODY and IE won't let you do it any other way.

var oRow = table.insertRow(-1);
:-)

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