James Black said on 28/04/2006 3:25 AM AEST:[color=blue]
> 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";[/color]
When posting code, indent with 2 or 4 spaces, manually wrap at about 70
characters to prevent auto-wrapping introducing errors.
[color=blue]
> 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;[/color]
The use of $(...) indicates the use of prototype.js, it seems you don't
really need it here.
[color=blue]
> inputChildEl.id = anchorName;
> inputChildEl.onmouseout =
> ModifyGrades.handlemouseout;
> inputChildEl.onmouseover =
> ModifyGrades.handlemouseover;
> inputChildEl.onclick = ModifyGrades.dateSelect;
> inputChildEl.width = "10em";
> inputChildEl.size = 10;[/color]
It's not a good idea to use deprecated element attributes, use CSS style
attributes instead.
[color=blue]
>
> inputChildEl.setAttribute("readonly","readonly");[/color]
A recent thread discussed setAttribute vs. direct access to DOM object
properties. Some browsers have issues with setAttribute, so just use:
inputChildEl.readonly = true;
[color=blue]
>
> tdChildEl.appendChild(inputChildEl);
> var rowelem = document.createElement('tr');[/color]
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...
[color=blue]
> 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";[/color]
Deprecated attributes again...
[color=blue]
> calImgEl.border = "0";
> aChildEl.appendChild(calImgEl);
> tdChildEl = document.createElement('td');
> tdChildEl.appendChild(aChildEl);
> rowelem.appendChild(tdChildEl);[/color]
More efficient replace the above 3 lines with:
var tdChildEl = rowelem.insertCell(-1);
tdChildEl.appendChild(aChildEl);
[color=blue]
>
> var tableelem =
> document.createElement('table');
> tableelem.appendChild(rowelem);[/color]
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.
[color=blue]
> span.appendChild(tableelem);
> span.style.visibility="visible";[/color]
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.com/FAQ>
