无法向表格添加新行答案

【问题标题】：Can't add new row to table无法向表格添加新行
【发布时间】：2012-12-02 01:37:15
【问题描述】：

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

【问题讨论】：

用tablebody.getElementsByTagName("tbody")代替tablebody.tBodies[0]
并且使用.innerHTML 来处理元素很难管理...查看insertRow、insertCell、createElement 和appendChild
而且您不应该将同一行放置 15 次 - 那里的元素具有相同的 id 属性，这在 HTML 中是不允许的。好吧，至少你会很难用 Javascript 来操作它们……

标签： javascript html innerhtml appendchild

【解决方案1】：

getElementsByTagName 返回一个 NodeList，您可以使用节点的索引访问它的第一个节点

我会将代码更改为以下内容

var innerRow = "";

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

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

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

【讨论】：

【解决方案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));
  }
}

【讨论】：

为什么要创建并附加一个已经隐式存在的tbody？
因为我的想法不正确XD
哈哈没问题，只是想知道。另一个问题 - tr.cloneNode(true) 是干什么用的？为什么不直接附加tr？这个我不知道答案
如果你只是追加相同的tr 15 次，你仍然只有一行。 cloneNode 是创建行的 15 个副本并追加它们。
我是个白痴——我想我什至没有看原始代码试图做什么。我没有意识到 OP 放入了 15 个副本。我记得 15 个循环，但我想我认为他们基于 i 或其他东西制作了 15 个不同的行。也许我应该读一下。你的cloneNode 现在有意义了:)

【解决方案3】：

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

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

【讨论】：

【解决方案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
}

【讨论】：

这仍然没有解决 IE 不允许在 <table> 元素中使用 innerHTML 的事实。