我正在尝试使用 Javascript 动态添加表行(稍后我将添加 Ajax 请求),但出现以下错误:Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
我的代码如下:
function SplitsJob() {
var newJob = document.createElement("tr");
newJob.innerHTML = "<tr><td>Foo</td><td>Bar</td></tr>";
var under = document.getElementById("row1");
document.body.insertBefore(newJob, under);
}
当这个函数被调用时,我想添加另一个<tr>
(包含 newJob.innerHTML
的内容)在 <tr>
下方ID 为 row1
.
我在 this Mozilla page 上找到了代码
最佳答案
示例 HTML:
<table id="mytable">
<tbody>
<tr id="row1"><td>xxx</td><td>Bar</td></tr>
</tbody>
</table>
<a href="#" onclick="javascript:InsertBefore();return false;">Insert Before</a><br/>
<a href="#" onclick="javascript:AppendChild();return false;">Append Child</a><br/>
<a href="#" onclick="javascript:InsertRow();return false;">InsertRow</a>
示例脚本:
var i=0;
function randColor() {
var str=Math.round(16777215*Math.random()).toString(16);
return "#000000".substr(0,7-str.length)+str;
}
function InsertBefore() {
var table = document.getElementById("mytable");
var under = document.getElementById("row1");
var newJob = document.createElement("tr");
newJob.style.backgroundColor=randColor();
//newJob.innerHTML = "<tr><td>Foo</td><td>Bar</td></tr>"; // its inserted inside TR. no additional TR's needed.
newJob.innerHTML = "<td>Foo "+(i++)+".</td><td>Bar</td>";
table.tBodies[0].insertBefore(newJob,under);
}
function AppendChild() {
var table = document.getElementById("mytable");
var newJob = document.createElement("tr");
newJob.style.backgroundColor=randColor();
newJob.innerHTML = "<td>Foo "+(i++)+".</td><td>Bar</td>";
table.tBodies[0].appendChild(newJob);
}
function InsertRow() {
var indexToInsert=1;
var table = document.getElementById("mytable");
var newJob = table.tBodies[0].insertRow(indexToInsert);
newJob.style.backgroundColor=randColor();
newJob.innerHTML = "<td>Foo "+(i++)+".</td><td>Bar</td>";
}
TR 是“表行”。 TR 元素只能附加到 TABLE、TBODY、THEAD、TFOOT 元素中。
在 MDN 和 MSDN 中查找 appendChild() 和 insertRow() 方法
关于Javascript动态添加元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7253945/