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,并且控制台中没有错误。为什么没有添加?
最佳答案
getElementsByTagName 返回一个 NodeList,您可以使用节点的索引在第一个节点访问它
我会把代码改成下面这样
var innerRow = "";
for(var i=0;i<15;i++){
innerRow += row;
}
tablebody.getElementsByTagName("tbody")[0].innerHTML = innerRow
这样你只扫描 DOM 一次而不是 15 次
关于javascript - 无法向表中添加新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13872123/