Internet Explorer DOM问题

Question

I am creating a new table with Javascript which contains a row with a fieldset, an input element, an image and a script element. It works perfectly in FF, Chrome, Safari but not on Internet Explorer. The table gets displayed but their is something wrong with the input, img or script tag in IE I presume. Any help would be much appreciated.

var fSetTbl = document.createElement("table");
var fSetTblBody = document.createElement("tbody");                                      

///////////first row
var row1 = document.createElement("tr");
var cell1 = document.createElement("td");
(navigator.appName == "Microsoft Internet Explorer") ? cell1.setAttribute("className", "keyNested2") : cell1.setAttribute("class", "keyNested2");
var label1 = document.createElement("label");
label1.setAttribute("for", startFieldName);
label1.innerHTML = "Start Date/Time";                                       
cell1.appendChild(label1);

var cell2 = document.createElement("td");
var element = document.createElement("input");
(navigator.appName == "Microsoft Internet Explorer") ? element.setAttribute("className", "inputboxdateNested") : element.setAttribute("class", "inputboxdateNested");                                       
element.setAttribute("type", "text");
element.setAttribute("name", startFieldName);
element.setAttribute("id", startFieldName);                                     
element.setAttribute("value", modifiedDate);
element.setAttribute("size", "40");
element.setAttribute("onblur","isDate(this.value,'"+startFieldName+"')"); 
cell2.appendChild(element);

var img = document.createElement("img");
img.src = "../images/icons/date.png";
img.setAttribute("id",startFieldButton);
//img.align = "absmiddle"; //works
img.setAttribute("align","absmiddle"); //works
img.setAttribute("border","0"); 
img.style.cursor = "pointer";
img.setAttribute ("onmouseover","this.style.background='black'");
img.setAttribute ("onmouseout","this.style.background=''");
cell2.appendChild(img);



var calScript = document.createElement("script");
calScript.language = "JavaScript";
calScript.type = "text/javascript";
//calScript.setAttribute('type','text/javascript');
var calCode = getCalCode(startFieldName,startFieldButton,modifiedDate,dateTimeFormat,showTime,timeType);
var scriptText = document.createTextNode(calCode);
(navigator.appName == "Microsoft Internet Explorer") ? calScript.text = calCode : calScript.appendChild(scriptText);
cell2.appendChild(calScript);

row1.appendChild(cell1);
row1.appendChild(cell2);
fSetTblBody.appendChild(row1);

////////////second row
var row2 = document.createElement("tr");
cell1 = document.createElement("td");
(navigator.appName == "Microsoft Internet Explorer") ? cell1.setAttribute("className", "keyNested2") : cell1.setAttribute("class", "keyNested2");
label1 = document.createElement("label");
label1.setAttribute("for", endFieldName);
label1.innerHTML = "End Date/Time";                                     
cell1.appendChild(label1);

cell2 = document.createElement("td");
element = document.createElement("input");
(navigator.appName == "Microsoft Internet Explorer") ? element.setAttribute("className", "inputboxdateNested") : element.setAttribute("class", "inputboxdateNested");                                       
element.setAttribute("type", "text");
element.setAttribute("name", endFieldName);
element.setAttribute("id", endFieldName);                                       
element.setAttribute("value", modifiedDate);
element.setAttribute("size", "40");
element.setAttribute("onblur","isDate(this.value,'"+endFieldName+"')"); 
cell2.appendChild(element);

img = document.createElement("img");
img.src = "../images/icons/date.png";
img.setAttribute("id",endFieldButton);
//img.align = "absmiddle"; //works
img.setAttribute("align","absmiddle"); //works
img.setAttribute("border","0"); 
img.style.cursor = "pointer";
img.setAttribute ("onmouseover","this.style.background='black'");
img.setAttribute ("onmouseout","this.style.background=''");
cell2.appendChild(img);

calScript = document.createElement("script");
calScript.language = "JavaScript";
calScript.type = "text/javascript";
var calCode = getCalCode(endFieldName,endFieldButton,modifiedDate,dateTimeFormat,showTime,timeType);
var scriptText = document.createTextNode(calCode);
(navigator.appName == "Microsoft Internet Explorer") ? calScript.text = calCode : calScript.appendChild(scriptText);
cell2.appendChild(calScript);

row2.appendChild(cell1);
row2.appendChild(cell2);
fSetTblBody.appendChild(row2);

fSetTbl.appendChild(fSetTblBody);
(navigator.appName == "Microsoft Internet Explorer") ? fSetTbl.setAttribute("className", "skTable") : fSetTbl.setAttribute("class", "skTable");
fSetTbl.setAttribute("cellPadding","0");
fSetTbl.setAttribute("cellSpacing","1");                                        
fSet.appendChild(fSetTbl);
tblBody.appendChild(mainRow);   

Below is what it generates in IE 8.

<TR><TD>
<FIELDSET class=popupFormNested><LEGEND class=grey-black>New Entry 1</LEGEND>
<TABLE class=skTable cellSpacing=1 cellPadding=0>
<TBODY>
<TR>
<TD class=keyNested2><LABEL for="dueDate_1">Start Date/Time</LABEL></TD>
<TD>
<INPUT onblur="isDate(this.value,'dueDate_1')" id=dueDate_1 class=inputboxdateNested value="01-05-2012 08:00 PM" size=40>
<IMG style="CURSOR: pointer" id=dueDateButton_1 onmouseover="this.style.background='black'" onmouseout="this.style.background=''" border=0 align=absMiddle src="../images/icons/date.png" width=16 height=16>
<SCRIPT language=JavaScript type=text/javascript>Calendar.setup({ trigger : "dueDateButton_1", inputField : "dueDate_1", dateFormat : "%m-%d-%Y %I:%M %p", showTime : 12, fdow : 0, selectionType : Calendar.SEL_SINGLE, selection : "01-05-2012 08:00 PM", animated : true, align : "Bl/ / / / ", onTimeChange : function() { var date = this.selection.get(); date = Calendar.intToDate(date); date = Calendar.printDate(date, "%m-%d-%Y"); var h = this.getHours(), m = this.getMinutes(), aorp = "AM", t = ""; var timeType = "civilian"; if (timeType == "civilian") { if (h > 11) aorp = "PM"; if (h == 0) h = 12; if (h > 12) h = h - 12; if (h < 10) h = "0" + h; if (m < 10) m = "0" + m; t = h + ":" + m + " " + aorp;    } else { if (h < 10) h = "0" + h; if (m < 10) m = "0" + m; t = h + ":" + m; } date = date + " " + t; document.getElementById("dueDate_1").value = date; }   }); </SCRIPT>
</TD></TR>

Answer 1

There's a known limitation of Internet Explorer which is unable to set the name attribute on existing elements, a workaround (rather hackish) exists though, read this for more details.

http://mondaybynoon.com/20070924/creating-named-elements-in-ie-via-javascript-impossible/