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返回一个NodeList，您可以使用节点索引访问第一个节点

我会将代码更改为以下

var innerRow = "";

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

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

这样你只扫描一次DOM一次

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

您可以尝试使用查询选择器而不是getElementsByTagName。

document.querySelector('#classettable tbody').innerHTML += row;

Answer 4

每次循环运行时都没有必要添加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
}

无法向表中添加新行

4 个答案: