关于js创建table时IE和火狐的区别
在做项目的时候，有个需求是：点一个按钮要添加一个table表单。
部分代码如下(其中surveyIdIndex，optionIdIndex，optionPIdIndex是全局变量）：
var obj = document.getElementById("surveyid");
var tableNode = document.createElement("table");
tableNode.setAttribute("width", "100%");
tableNode.setAttribute("border", 0);
tableNode.setAttribute("cellpadding", 0);
tableNode.setAttribute("cellspacing", 0);
tableNode.setAttribute("id", "surveyTable" + surveyIdIndex);
// 第一行
var row1Node = document.createElement("tr");
var th1Node = document.createElement("th");
th1Node.appendChild(document.createTextNode("调查题目" + (surveyIdIndex + 1) + "："));
row1Node.appendChild(th1Node);
var td1Node = document.createElement("td");
var textFiled1 = document.createElement("input");
textFiled1.setAttribute("name", "surveyTitle_" + surveyIdIndex);
textFiled1.setAttribute("type", "text");
textFiled1.setAttribute("id", "title");
//textFiled1.setAttribute("class", "input400");
if( !window.addEventListener){ // IE
textFiled1.className="input400";
}else{ // FF
textFiled1.setAttribute("class", "input400");
}
td1Node.appendChild(textFiled1);
var textFiled_1 = document.createElement("input");
textFiled_1.setAttribute("name", "add");
textFiled_1.setAttribute("type", "button");
textFiled_1.setAttribute("value", " - ");
if( !window.addEventListener){ // IE
textFiled_1.className="add2";
textFiled_1.attachEvent("onclick", function(){delete_newsurvey(tempSurvyIndex);});
}else{ // FF
textFiled_1.setAttribute("class", "add2");
textFiled_1.addEventListener('click', function(){delete_newsurvey(tempSurvyIndex);}, false);
}
//textFiled_1.onclick = function(){delete_newsurvey(tempSurvyIndex);};
td1Node.appendChild(textFiled_1);
row1Node.appendChild(td1Node);
tableNode.appendChild(row1Node);
// 第二行
var row2Node = document.createElement("tr");
var th2Node = document.createElement("th");
th2Node.appendChild(document.createTextNode("选项形式："));
row2Node.appendChild(th2Node);
var td2Node = document.createElement("td");
var textFiled2 = document.createElement("input");
textFiled2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled2.setAttribute("type", "radio");
textFiled2.setAttribute("id", "danxuan");
if( !window.addEventListener){ // IE
textFiled2.className="radio";
}else{ // FF
textFiled2.setAttribute("class", "radio");
}
textFiled2.setAttribute("value", "0");
textFiled2.setAttribute("checked", "true");
td2Node.appendChild(textFiled2);
var labelNode1 = document.createElement("label");
labelNode1.setAttribute("for", "danxuan");
labelNode1.appendChild(document.createTextNode("单选形式"));
td2Node.appendChild(labelNode1);
var textFiled_2 = document.createElement("input");
textFiled_2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");
if( !window.addEventListener){ // IE
textFiled_2.className="radio";
}else{ // FF
textFiled_2.setAttribute("class", "radio");
}
textFiled_2.setAttribute("value", "1");
td2Node.appendChild(textFiled_2);
var labelNode2 = document.createElement("label");
labelNode2.setAttribute("for", "duoxuan");
labelNode2.appendChild(document.createTextNode("多选形式"));
td2Node.appendChild(labelNode2);
row2Node.appendChild(td2Node);
tableNode.appendChild(row2Node);
// 第三行
var row3Node = document.createElement("tr");
var th3Node = document.createElement("th");
th3Node.appendChild(document.createTextNode("选 项："));
row3Node.appendChild(th3Node);
var td3Node = document.createElement("td");
var div3Node = document.createElement("div");
div3Node.setAttribute("id", "optionid" + optionIdIndex);
var p3Node = document.createElement("p");
p3Node.setAttribute("id", "optionP" + optionPIdIndex);
var textFiled3 = document.createElement("input");
textFiled3.setAttribute("name", "surveyOptSurveyname_" + surveyIdIndex);
textFiled3.setAttribute("type", "text");
if( !window.addEventListener){ // IE
textFiled3.className="input80";
}else{ // FF
textFiled3.setAttribute("class", "input80");
}
p3Node.appendChild(textFiled3);
p3Node.appendChild(document.createTextNode("链接："));
var textFiled3_link = document.createElement("input");
textFiled3_link.setAttribute("name", "surveyOptSurveylink_" + surveyIdIndex);
textFiled3_link.setAttribute("type", "text");
if( !window.addEventListener){ // IE
textFiled3_link.className="input80";
}else{
textFiled3_link.setAttribute("class", "input80");
}
p3Node.appendChild(textFiled3_link);
p3Node.appendChild(document.createTextNode("图片："));
var textFiled3_pic = document.createElement("input");
textFiled3_pic.setAttribute("name", "surveyOptPicfile_" + surveyIdIndex + "_" + (optionPIdIndex + 1));
textFiled3_pic.setAttribute("type", "file");
if( !window.addEventListener){ // IE
textFiled3_pic.className="input200";
}else{ // FF
textFiled3_pic.setAttribute("class", "input200");
}
p3Node.appendChild(textFiled3_pic);
var textFiled3_add = document.createElement("input");
textFiled3_add.setAttribute("name", "add");
//textFiled3_link.setAttribute("class", "add2");
textFiled3_add.setAttribute("type", "button");
textFiled3_add.setAttribute("value", " + ");
if(!window.addEventListener){ // IE
textFiled3_link.className = "add2";
textFiled3_add.attachEvent("onclick", function(){add_newopition(tempSurvyIndex, tempOptIndex);});
}else{ // FF
textFiled3_link.setAttribute("class", "add2");
textFiled3_add.addEventListener('click', function(){add_newopition(tempSurvyIndex, tempOptIndex);}, false);
}
//textFiled3_add.onclick = function(){add_newopition(tempSurvyIndex, tempOptIndex);};
p3Node.appendChild(textFiled3_add);
div3Node.appendChild(p3Node);
td3Node.appendChild(div3Node);
row3Node.appendChild(td3Node);
tableNode.appendChild(row3Node);
alert("---" + tableNode.outerHTML);
obj.appendChild(tableNode)
var tableNode = document.createElement("table");
tableNode.setAttribute("width", "100%");
tableNode.setAttribute("border", 0);
tableNode.setAttribute("cellpadding", 0);
tableNode.setAttribute("cellspacing", 0);
tableNode.setAttribute("id", "surveyTable" + surveyIdIndex);
// 第一行
var row1Node = document.createElement("tr");
var th1Node = document.createElement("th");
th1Node.appendChild(document.createTextNode("调查题目" + (surveyIdIndex + 1) + "："));
row1Node.appendChild(th1Node);
var td1Node = document.createElement("td");
var textFiled1 = document.createElement("input");
textFiled1.setAttribute("name", "surveyTitle_" + surveyIdIndex);
textFiled1.setAttribute("type", "text");
textFiled1.setAttribute("id", "title");
//textFiled1.setAttribute("class", "input400");
if( !window.addEventListener){ // IE
textFiled1.className="input400";
}else{ // FF
textFiled1.setAttribute("class", "input400");
}
td1Node.appendChild(textFiled1);
var textFiled_1 = document.createElement("input");
textFiled_1.setAttribute("name", "add");
textFiled_1.setAttribute("type", "button");
textFiled_1.setAttribute("value", " - ");
if( !window.addEventListener){ // IE
textFiled_1.className="add2";
textFiled_1.attachEvent("onclick", function(){delete_newsurvey(tempSurvyIndex);});
}else{ // FF
textFiled_1.setAttribute("class", "add2");
textFiled_1.addEventListener('click', function(){delete_newsurvey(tempSurvyIndex);}, false);
}
//textFiled_1.onclick = function(){delete_newsurvey(tempSurvyIndex);};
td1Node.appendChild(textFiled_1);
row1Node.appendChild(td1Node);
tableNode.appendChild(row1Node);
// 第二行
var row2Node = document.createElement("tr");
var th2Node = document.createElement("th");
th2Node.appendChild(document.createTextNode("选项形式："));
row2Node.appendChild(th2Node);
var td2Node = document.createElement("td");
var textFiled2 = document.createElement("input");
textFiled2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled2.setAttribute("type", "radio");
textFiled2.setAttribute("id", "danxuan");
if( !window.addEventListener){ // IE
textFiled2.className="radio";
}else{ // FF
textFiled2.setAttribute("class", "radio");
}
textFiled2.setAttribute("value", "0");
textFiled2.setAttribute("checked", "true");
td2Node.appendChild(textFiled2);
var labelNode1 = document.createElement("label");
labelNode1.setAttribute("for", "danxuan");
labelNode1.appendChild(document.createTextNode("单选形式"));
td2Node.appendChild(labelNode1);
var textFiled_2 = document.createElement("input");
textFiled_2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");
if( !window.addEventListener){ // IE
textFiled_2.className="radio";
}else{ // FF
textFiled_2.setAttribute("class", "radio");
}
textFiled_2.setAttribute("value", "1");
td2Node.appendChild(textFiled_2);
var labelNode2 = document.createElement("label");
labelNode2.setAttribute("for", "duoxuan");
labelNode2.appendChild(document.createTextNode("多选形式"));
td2Node.appendChild(labelNode2);
row2Node.appendChild(td2Node);
tableNode.appendChild(row2Node);
// 第三行
var row3Node = document.createElement("tr");
var th3Node = document.createElement("th");
th3Node.appendChild(document.createTextNode("选 项："));
row3Node.appendChild(th3Node);
var td3Node = document.createElement("td");
var div3Node = document.createElement("div");
div3Node.setAttribute("id", "optionid" + optionIdIndex);
var p3Node = document.createElement("p");
p3Node.setAttribute("id", "optionP" + optionPIdIndex);
var textFiled3 = document.createElement("input");
textFiled3.setAttribute("name", "surveyOptSurveyname_" + surveyIdIndex);
textFiled3.setAttribute("type", "text");
if( !window.addEventListener){ // IE
textFiled3.className="input80";
}else{ // FF
textFiled3.setAttribute("class", "input80");
}
p3Node.appendChild(textFiled3);
p3Node.appendChild(document.createTextNode("链接："));
var textFiled3_link = document.createElement("input");
textFiled3_link.setAttribute("name", "surveyOptSurveylink_" + surveyIdIndex);
textFiled3_link.setAttribute("type", "text");
if( !window.addEventListener){ // IE
textFiled3_link.className="input80";
}else{
textFiled3_link.setAttribute("class", "input80");
}
p3Node.appendChild(textFiled3_link);
p3Node.appendChild(document.createTextNode("图片："));
var textFiled3_pic = document.createElement("input");
textFiled3_pic.setAttribute("name", "surveyOptPicfile_" + surveyIdIndex + "_" + (optionPIdIndex + 1));
textFiled3_pic.setAttribute("type", "file");
if( !window.addEventListener){ // IE
textFiled3_pic.className="input200";
}else{ // FF
textFiled3_pic.setAttribute("class", "input200");
}
p3Node.appendChild(textFiled3_pic);
var textFiled3_add = document.createElement("input");
textFiled3_add.setAttribute("name", "add");
//textFiled3_link.setAttribute("class", "add2");
textFiled3_add.setAttribute("type", "button");
textFiled3_add.setAttribute("value", " + ");
if(!window.addEventListener){ // IE
textFiled3_link.className = "add2";
textFiled3_add.attachEvent("onclick", function(){add_newopition(tempSurvyIndex, tempOptIndex);});
}else{ // FF
textFiled3_link.setAttribute("class", "add2");
textFiled3_add.addEventListener('click', function(){add_newopition(tempSurvyIndex, tempOptIndex);}, false);
}
//textFiled3_add.onclick = function(){add_newopition(tempSurvyIndex, tempOptIndex);};
p3Node.appendChild(textFiled3_add);
div3Node.appendChild(p3Node);
td3Node.appendChild(div3Node);
row3Node.appendChild(td3Node);
tableNode.appendChild(row3Node);
alert("---" + tableNode.outerHTML);
obj.appendChild(tableNode)
发现在火狐下，能正确创建table，并能显示出效果。而在IE同过alert可以看出创建了元素，但页面上看不到效果。仔细一看，在创建的input标签中都缺失了“name”属性（尽管代码中设置了此属性）。
以为此是原因之所在。后来去网上找了下。之所以在ie下创建的“input”元素的“name”属性会缺失，是因为不能像这样去创建“input”元素（火狐则可以）：
var textFiled_2 = document.createElement("input");
textFiled_2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");
textFiled_2.setAttribute("name", "surveyType_" + surveyIdIndex);
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");
而应该像这样去创建：
var textFiled_2 = document.createElement("<input name=/"surveyType_" + surveyIdIndex + "/" >"");
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");
textFiled_2.setAttribute("type", "radio");
textFiled_2.setAttribute("id", "duoxuan");
通过这样去创建的input元素的“name”属性才不会缺失。
但是发现这样创建的标签，虽然属性都没有缺失了，但在ie下还是看不到效果。（说明属性缺失不是在ie显示不出的真正原因）。
后来又到网上找了一下，发现在ie下创建“table”元素（想要看到创建的效果），不应该把创建的“tr”标签直接通过appendChild（）追加到“table”下面；而应该现创建一个“tbody”标签，然后把创建的“tr”标签通过appendChild（）追加到“tbody”标签下面，最后再把“tbody”标签通过appendChild（）追加到“table”标签下面，这样才能看到效果（所以这才是症结之所在）！而在火狐下则无需此行！
