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

4

4 回答 4

3

getElementsByTagName 返回一个 NodeList 并使用节点的索引访问它的第一个节点

我会将代码更改为以下

var innerRow = "";

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

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

这样你只扫描 DOM 一次而不是 15 次

于 2012-12-14T03:26:15.033 回答
2

您不能innerHTML在 Internet Explorer 中的表上使用，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));
  }
}
于 2012-12-14T03:18:49.200 回答
1

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

document.querySelector('#classettable tbody').innerHTML += row;
于 2012-12-14T03:20:00.403 回答
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
}
于 2012-12-14T03:19:12.677 回答