Internet Explorer DOM issue

Question

我正在用Javascript创建一个新表，其中包含一行，该行包含一个字段集、一个输入元素、一个图像和一个脚本元素。它可以在FF、Chrome、Safari中完美运行，但不能在Internet Explorer中运行。表被显示了，但我认为IE中的input、img或script标记有问题。任何帮助都将不胜感激。

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);   

以下是它在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

Internet Explorer有一个已知的限制，即无法在现有元素上设置name属性，但存在一个变通方法（相当棘手），请阅读本文了解更多详细信息。

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