Internet Explorer DOM問題

Question

我正在用Javascript創建一個新表，其中包含一個帶有fieldset，輸入元素，圖像和腳本元素的行。它適用於FF，Chrome，Safari，但不適用於Internet Explorer。表被顯示，但他們是錯誤的輸入，IMG或腳本標記在IE我猜。任何幫助將非常感激。

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

還有的是不能設置在現有元素的name屬性的Internet Explorer的一個已知的限制，解決方法（而hackish的），儘管存在，閱讀更多細節。

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