新增删除removeChild

最新推荐文章于 2022-07-23 18:58:07 发布

原创最新推荐文章于 2022-07-23 18:58:07 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，通过JavaScript实现了表格行的动态添加与删除功能。该示例展示了如何使用JavaScript来操作DOM元素，具体包括添加新的表格行以及删除指定的表格行。

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

function deleate_a(){
var x=document.getElementById("ida").childNodes;
for(var i=x.length-1;i>0;i--){
y=x[i];
document.getElementById("ida").removeChild(y);
}
}

function deleate_b(){


var x=document.getElementById("idb").childNodes;
for(var i=x.length-1;i>0;i--){
y=x[i];
document.getElementById("idb").removeChild(y);
}
}

function add_a(){
var table_all=document.getElementById("table");
var x_1=document.createElement("tr");
var x_2=document.createElement("td");
x_2.innerHTML="xh003";
var x_3=document.createElement("td");
x_3.innerHTML="xiaoming";
x_1.appendChild(x_2);
x_1.appendChild(x_3);
table_all.appendChild(x_1);
// var table_all=document.getElementById("table");
// var x=document.getElementById("ida");
// table_all.appendChild(x);
}

</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>

<tr id="ida">
<td>xh001</td>
<td>王小明</td>
<td> <input name="确定" type="button" value="确定" onclick="deleate_a()"/>
</form></td>
</tr>

<tr id="idb">
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:deleate_b();" >删除</a></td> 
</tr>

</table>
<input type="button" value="添加一行" onclick="add_a()" /> 

</body>

</html>