JS如何使用重复添加节点以及子节点的方式增加表格的行

cao1004549261 2016-07-02 12:26:45

废话不多说，直接上问题吧
<script>
function add(){
var table=document.getElementById("tb");
var tr=document.createElement("tr");
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
var td4=document.createElement("td");

table.appendChild(tr);

var inp=document.createElement("input");
inp.setAttribute("type","text");
inp.setAttribute("id","inp");

var inp1=document.createElement("input");
inp1.setAttribute("type","text");
inp1.setAttribute("id","inp1");

var inp2=document.createElement("input");
inp2.setAttribute("type","text");
inp2.setAttribute("id","inp2");

var inp3=document.createElement("input");
inp3.setAttribute("type","text");
inp3.setAttribute("id","inp3");

tr.appendChild(td1);
td1.appendChild(inp);
tr.appendChild(td2);
td2.appendChild(inp1);
tr.appendChild(td3);
td3.appendChild(inp2);
tr.appendChild(td4);
td4.appendChild(inp3);

alert("你好");

}
function del(){

}
</script>
下面是body
<body>
<div id="div">
<table border="1" width="400" id="tb" name="table" >
<tr name="tr">
<td>名字</td>
<td>性别</td>
<td>学号</td>
<td><input type="button" id="add" value="增加" onclick="add()"><input type="button" id="del" value="删除" onclick="del()"></td>
</tr>
</table>
</div>
</body>
请问各位大神这个为何不能实现增加一行的操作？

...全文

455 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2016-07-02

打赏
举报

引用 6 楼 cao1004549261 的回复:

[quote=引用 3 楼天际的海浪的回复:]每个表格者必须有一个tbody元素。即使代码中没有写也会自动生成。 tr元素不能直接添加到table元素中，要添加到tbody元素中。

直接添加也可以啊，，，[/quote] ie8以下不可以

cocotsau 2016-07-02

打赏
举报

引用 4 楼 jslang 的回复:

如 table.getElementsByTagName("tbody")[0].appendChild(tr);

+1，表格DOM操作离不开tbody

cao1004549261 2016-07-02

打赏
举报

引用 2 楼 xuzuning的回复:

iE 的 table 节点是只读的！要这样

function add(){
  var table = document.getElementById("tb");
  var tr = table.insertRow();
  tr.insertCell().innerHTML = '<input type=text>';
  tr.insertCell().innerHTML = '<input type=text>';
  tr.insertCell().innerHTML = '<input type=text>';
}

这个是可以的，不过我想玩玩节点，，

cao1004549261 2016-07-02

打赏
举报

引用 3 楼天际的海浪的回复:

每个表格者必须有一个tbody元素。即使代码中没有写也会自动生成。 tr元素不能直接添加到table元素中，要添加到tbody元素中。

直接添加也可以啊，，，

cao1004549261 2016-07-02

打赏
举报

引用 1 楼萨拉嘿的回复:

= = LZ 测试过么，为什么我运行你的代码是可以的呢？顺带说下是 chrome 浏览器

是的，，，是浏览器的问题，，，

天际的海浪 2016-07-02

打赏
举报

如 table.getElementsByTagName("tbody")[0].appendChild(tr);

天际的海浪 2016-07-02

打赏
举报

每个表格者必须有一个tbody元素。即使代码中没有写也会自动生成。 tr元素不能直接添加到table元素中，要添加到tbody元素中。

xuzuning 2016-07-02

打赏
举报

iE 的 table 节点是只读的！要这样

function add(){
  var table = document.getElementById("tb");
  var tr = table.insertRow();
  tr.insertCell().innerHTML = '<input type=text>';
  tr.insertCell().innerHTML = '<input type=text>';
  tr.insertCell().innerHTML = '<input type=text>';
}