使用函数和DOM实现表格的增删查
使用函数和DOM实现表格的增删改查
要求:
(1)创建一个基础表格;
(2)实现在输入框输入数据后点击添加;
(3)对应的表格里便会出现该条数据并且自动生成编码;
(4)点击表格中的删除,该行数据便会被删除,
(5)自动生成的编码在点击删除后一并删除,不会改变。
思路
(1)利用简单的html创建一个基础表格框架;
(2)为节点赋予id名,根据id名查找DOM节点
(3)定义函数创建点击事件
(4)创建tr
(5)创建td
(6)将td放入tr
(7)将td放入tbody
(8)将输入的数据放入表格
(9)自动生成编号 (代码中生成的编号是简单的数字,并未具有具体的含义,如有别的需求需要自行添加)
(10)复制删除节点
(11)利用函数为超链接添加点击事件
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
text-align: center;
}
table {
width: 500px;
border: 1px solid gray;
border-collapse: collapse;
margin: 50px auto;
}
thead tr {
background: #ccc;
}
th,
td {
line-height: 35px;
border: 1px solid gray;
text-align: center;
}
</style>
</head>
<body>
<div>
<label for="txt1">用户名:</label>
<input type="text" id="txt1" >
<label for="txt2">年龄:</label>
<input type="text" id="txt2">
<button id="btn">添加</button>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody id='oTbody'>
<tr id='oTr'>
<td>0</td>
<td>jack</td>
<td>20</td>
<td id='oTd2'><a href="javascript:void(0)">删除</a></td>
</tr>
</tbody>
</table>
</div >
<script>
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2');
var oTr = document.getElementById('oTr');
var oTbody = document.getElementById('oTbody');
document.getElementById('btn').onclick = function () {
//创建tr
var oTr1 = document.createElement('tr');
//创建td
var oTd0 = document.createElement('td');
var oTd = document.createElement('td');
var oTd1 = document.createElement('td');
//将td放入tr
oTr1.appendChild(oTd0);
oTr1.appendChild(oTd);
oTr1.appendChild(oTd1);
//将td放入tbody
oTbody.appendChild(oTr1);
//将输入的数据放入表格
oTd.innerHTML = txt1.value;
oTd1.innerHTML = txt2.value;
//为第一个格加编号
oTd0.innerHTML=document.links.length;
//复制删除节点
var oTd2 = document.getElementById('oTd2');
var newA = oTd2.cloneNode(true);
oTr1.appendChild(newA);
//为超链接添加点击事件
var len = document.links.length;
for (var i = 0; i < len; i++) {
document.links[i].onclick = function () {
oTbody.removeChild(this.parentNode.parentNode)
}
}
}
</script>
</body >
</html >