在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接

查看本章节

查看作业目录

需求说明：

在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接，使用 DOM 节点的删除操作将对应的行数据删除

  • 在文本输入框中输入姓名、年龄、班级和手机号，并选择性别
  • 点击“插入数据”按钮，将输入框中的数据插入到表格中，表格中的数据将增加一条
  • 点击表格中每条数据后的“删除”超链接，将删除该条数据，表格中的数据将减少一条

实现思路：

  1. 在页面中绘制表格，并添加 4 条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件
  2. 在页面中添加文本输入框和选项菜单，并提示用户输入，添加“插入数据”按钮，并添加点击事件
  3. 在“插入数据”按钮的事件处理函数中，使用 document 对象的 getElementById、getElementsByTagName等属性获取输入框的值
  4. 使用 createElement 创建元素，使用 innerHTML 为元素设置文本，使用 appendChild 将创建的元素添加到 table 中
  5. 在“删除”超链接的事件处理函数中，获取超链接的父节点 td，继续获取父节点 tr，再获取父节点 table，然后将 table 节点中的 tr 节点删除

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" id="tb">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>班级</th>
				<th>电话</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>25</td>
				<td>软件1班</td>
				<td>138xxxx0987</td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>24</td>
				<td>软件2班</td>
				<td>136xxxx8766</td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>26</td>
				<td>计科1班</td>
				<td>199xxxx8867</td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
			<tr>
				<td>赵六</td>
				<td>女</td>
				<td>23</td>
				<td>计科2班</td>
				<td>188xxxx9965</td>
				<td><a href="#" onclick="del(this)">删除</a></td>
			</tr>
		</table>
		<p>
			<input type="text" id="name" placeholder="请输入姓名"/>
			<select>
				<option>男</option>
				<option>女</option>
			</select>
			<input type="text" id="age" placeholder="请输入年龄" />
			<input type="text" id="cls" placeholder="请输入班级" />
			<input type="text" id="mobile" placeholder="请输入手机号" />
			<input type="button" value="插入数据" onClick="insert()" />
		</p>
		<script type="text/javascript">
			function insert(){
				var sel=document.getElementsByTagName("select")[0];
				var gender=sel.options[sel.selectedIndex].text;
				var age=document.getElementById("age").value;
				var cls=document.getElementById("cls").value;
				var mobile=document.getElementById("mobile").value;
				var name=document.getElementById("name").value;
				var arrays=new Array(name,gender,age,cls,mobile);
				var tb=document.getElementById("tb");
				var cols=tb.getElementsByTagName("th");
				var newtr=document.createElement("tr");
				for (var i=0;i<cols.length;i++) {
					if(i==cols.length-1) {
						var td=document.createElement("td");
						var a=document.createElement("a");
						a.innerHTML="删除";
						a.onclick=function(){
							a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
							
						}
						a.setAttribute("href","#");
						td.appendChild(a);
						newtr.appendChild(td);
					}else{
						var td=document.createElement("td");
						td.innerHTML=arrays[i];
						newtr.appendChild(td);
					}
				}
				tb.appendChild(newtr);
				console.log(newtr)
			}
			function del(obj){
				var tr=obj.parentNode.parentNode;
				if (tr!=null) {
					tr.parentNode.removeChild(tr);
				}
			}
		</script>
	</body>
</html>

 

posted @ 2020-11-01 19:47  明金同学  阅读(47)  评论(0)  编辑  收藏  举报