无法在表格中添加新行

Question

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，并且控制台中没有错误。为什么没有被添加？

Answer 1

的getElementsByTagName返回一个节点列表，你使用节点的索引

我就这样，你只扫描DOM的代码更改为以下

var innerRow = ""; 

for(var i=0;i<15;i++){ 
    innerRow += row; 
} 

tablebody.getElementsByTagName("tbody")[0].innerHTML = innerRow 

访问它的第一个节点一次不是15次

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

Answer 3

没有一点增加每次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 
}