实时增加，删除人员信息表

最新推荐文章于 2021-09-14 12:22:10 发布

Sunqlive

最新推荐文章于 2021-09-14 12:22:10 发布

阅读量792

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/sunqlive/article/details/52353894

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//删除按钮的点击事件处理程序
function btnDeleteHader(currentBtn) {
//获取当前“删除”按钮所在的行
var tr = currentBtn.parentNode.parentNode;
//从Tbody中删除某行
document.getElementById('tbody1').removeChild(tr);
}
window.onload = function () {
//增加按钮的单击事件
document.getElementById('btnAdd').onclick = function () {
//获取用户输入的数据
var user_name = document.getElementById('txtName').value;
var user_age = document.getElementById('txtAge').value;
//获取tbody对象
var tbodyObj = document.getElementById('tbody1');
//插入一行
var currentRow = tbodyObj.insertRow(-1);
//插入三列
currentRow.insertCell(-1).innerHTML = user_name;
currentRow.insertCell(-1).innerHTML = user_age;
currentRow.insertCell(-1).innerHTML = '<input type="button" οnclick="btnDeleteHader(this);" value="删除" />';
};
}
</script>
<style type="text/css">
#tbody1 td
{
text-align:center;
}
</style>
</head>
<body>
<fieldset style="width:250px;">
<legend>增加人员信息</legend>
<p>
姓名:<input id="txtName"/>
</p>
<p>
年龄:<input id="txtAge"/>
</p>
<p>
<input id="btnAdd" type="button" name="name" value="增加" />
</p>
</fieldset>
<table border="1" cellpadding="2" cellspacing="2" style="width:300px;">
<caption>人员信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>删除</th>
</tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
</body>
</html>