function load(){
var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>";
var tablebody = document.getElementById("classestable");
tablebody.innerHTML += "<tbody></tbody>";
tablebody.getElementsByTagName("tbody").innerHTML = "";
for(var i=0;i<15;i++){
tablebody.getElementsByTagName("tbody").innerHTML += row;
}
}
上述代码运行正常,但row
的内容未添加到tbody
。
console.log
显示row
的内容是有效的html,并且控制台中没有错误。为什么没有添加?
答案 0 :(得分:3)
getElementsByTagName返回一个NodeList,您可以使用节点索引访问第一个节点
我会将代码更改为以下
var innerRow = "";
for(var i=0;i<15;i++){
innerRow += row;
}
tablebody.getElementsByTagName("tbody")[0].innerHTML = innerRow
这样你只扫描一次DOM一次
答案 1 :(得分:2)
您无法在Internet Explorer中的表上使用innerHTML
,getElementsByTagName
返回NodeList
而不是单个节点,此外表还有tBodies
属性。
您修改后的代码应为:
function load(){
var tr = document.createElement('tr'), td;
td = tr.appendChild(document.createElement('td'));
td.innerHTML = "<select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select>";
td = tr.appendChild(document.createElement('td'));
td.innerHTML = "<input id=\"choosemods\" type=\"text\" />";
td = tr.appendChild(document.createElement('td'));
td.innerHTML = "<input id=\"choosegrade\" type=\"text\" />";
var tablebody = document.getElementById("classestable").tBodies[0];
for(var i=0;i<15;i++){
tablebody.appendChild(tr.cloneNode(true));
}
}
答案 2 :(得分:1)
您可以尝试使用查询选择器而不是getElementsByTagName
。
document.querySelector('#classettable tbody').innerHTML += row;
答案 3 :(得分:0)
每次循环运行时都没有必要添加dom。将它添加到html变量并执行一个dom事务。
function load(){
var html= '';
var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>";
var tablebody = document.getElementById("classestable");
tablebody.innerHTML += "<tbody></tbody>";
tablebody.getElementsByTagName("tbody").innerHTML = "";
for(var i=0;i<15;i++){
html += row;
}
tablebody.getElementsByTagName("tbody")[0].innerHTML = html;// Select first element from array of nodes
}