DOM的增删改实例

最新推荐文章于 2022-06-23 20:49:43 发布

dweblover

最新推荐文章于 2022-06-23 20:49:43 发布

阅读量1.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： DOM DOM增删改

本文链接：https://blog.youkuaiyun.com/dweblover/article/details/84678747

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用DOM操作实现网页上员工信息的动态管理，包括通过JavaScript删除指定员工记录及添加新员工信息至表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.给出如下图，请利用DOM的增删改完成员工信息的删除以及添加
效果图
2.具体代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM删除练习</title>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
}
#employeeTable{
	margin:50px auto;
	border-spacing:0px;
    
	
}
div{
	width:298px;
	margin:50px auto;
	border:1px solid;
	padding-left:20px;
}
h4{
	padding:20px 0px;
}
div table{
	padding-bottom:10px;
}
a{
	text-decoration:none;
}
</style>
<script type="text/javascript">
function del()
{

		//因为点击超链接以后，超链接会跳转页面，这是超链接的默认行为，所以写成此形式<a href="javascript:;">，这样可以防止页面跳转也可以在删除后面写一个return false;
		//点击超链接以后需要删除超链接所在的行
		//获取当前a所在的行
		var tr=this.parentNode.parentNode;//这里的this表示我们所点击的那个超链接
		//获取当前要删除员工的名字
		var name=tr.getElementsByTagName("td")[0].innerHTML;
		var flag=confirm("确认要删除"+name+"吗");//confirm有返回值，确认为true和取消为false

		if(flag)//如果点击确认则删除tr
		tr.parentNode.removeChild(tr);
		//return false;
		
		
}
window.onload=function()
{
//1.点击超链接以后删除一个员工信息
//获取所有的超链接
	var alla=document.getElementsByTagName("a");
//为每一个超链接都绑定一个单击响应事件（遍历）
	for(var i=0;i<alla.length;i++)
	{
		alla[i].onclick=del;
		
	}
	//2.点击submit按钮后添加一个员工信息到表格中
	//获取按钮
	var btn=document.getElementById("addEmpButton");
	//点击响应事件
	btn.onclick=function()
	{
		//获取用户添加的员工信息（获取员工姓名）
		var name=document.getElementById("empName").value;
		//获取员工的邮箱
		var email=document.getElementById("email").value;
		//获取员工工资
		var salary=document.getElementById("salary").value;
		
		//需要将获取到的信息保存到tr中
		//创建一个tr
		var tr=document.createElement("tr");
		//设置tr里的内容
		tr.innerHTML="<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>delete</a></td>";
		//获取tr中的a
		var a=tr.getElementsByTagName("a")[0];
		//绑定单击响应函数
		a.onclick=del;
		//获取table
		var employeeTb=document.getElementById("employeeTable");
		//获取tbody
		var tbody=employeeTb.getElementsByTagName("tbody")[0];
		//将tr添加到table中
		tbody.appendChild(tr);
		};
};
</script>
</head>
<body>
<table  id="employeeTable" border="1px">
<tr>
<th>Name</th>
<th>Eamil</th>
<th>Salary</th>
<th>&nbsp;</th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">delete</a></td>
</tr>
<tr>
<td>Jeery</td>
<td>jeery@jerry.com</td>
<td>8000</td>
<td><a href="javascript:;">delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@bob.com</td>
<td>10000</td>
<td><a href="javascript:;">delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table >
<tr>
<td class="word">name:</td>
<td class="inp"><input type="text" name="empName" id="empName"/></td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp"><input type="text" name="email" id="email"/></td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp"><input type="text" name="salary" id="salary"/></td>
</tr>
<tr>
<td colspan="2" align="center"><button id="addEmpButton" value="abc">submit</button></td>
</tr>
</table>
</div>
</body>
</html>

3.删除结果图
效果图
4.成功删除Tom信息
在这里插入图片描述
5.添加信息

6.说明：下面的这两句代码可以有另一种写法

    //创建一个tr
		var tr=document.createElement("tr");
		//设置tr里的内容
		tr.innerHTML="<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>delete</a></td>";
		//获取table
		var employeeTb=document.getElementById("employeeTable");
		//获取tbody
		var tbody=employeeTb.getElementsByTagName("tbody")[0];
		//将tr添加到table中
		tbody.appendChild(tr);

附另一种写法

//创建一个tr
		var tr=document.createElement("tr");
		//创建四个td
		var nametd=document.createElement("td");
		var emailtd=document.createElement("td");
		var salarytd=document.createElement("td");
		var atd=document.createElement("td");
		//创建一个a
		var a=document.createElement("a");
		//创建文本结点
		var nametext=document.createTextNode(name);
		var emailtext=document.createTextNode(email);
		var salarytext=document.createTextNode(salary);
		var deltext=document.createTextNode("delete");
		//将文本结点放到td中
		nametd.appendChild(nametext);
		emailtd.appendChild(emailtext);
		salarytd.appendChild(salarytext);
		a.appendChild(deltext);
		atd.appendChild(a);
		//将td放到tr中
		tr.appendChild(nametd);
		tr.appendChild(emailtd);
		tr.appendChild(salarytd);
		tr.appendChild(atd);
		//获取table
		var employeeTb=document.getElementById("employeeTable");
		//获取tbody
		var tbody=employeeTb.getElementsByTagName("tbody")[0];
		//将tr添加到table中
		tbody.appendChild(tr);

作用是创建表格的一行（例如下面的例子）

<tr>
<td>Jeery</td>
<td>jeery@jerry.com</td>
<td>8000</td>
<td><a href="javascript:;">delete</a></td>
</tr>