js:dom查询练习2，增加修改员工信息

最新推荐文章于 2022-11-27 20:04:16 发布

前程韶光

最新推荐文章于 2022-11-27 20:04:16 发布

阅读量317

点赞数

分类专栏： JS 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_51235620/article/details/120894941

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图如下：
在这里插入图片描述
通过下方的输入框输入信息，点击Submit将信息添加到上方的列表中，而且，当信息不全时提示：

删除信息时，给出如下提示：

基本思路：
1运用html，css构建基本布局
2利用htmldom对象，在js代码中获取三个多选框以及Submit的对象
3为submit绑定单击响应函数，获取多选框中的文本值并判断是否全不为空
4新建tr元素，为其添加子元素，此处可以通过innerHTML属性直接操作tr中的html代码
5将新建tr元素添加到员工列表即可
代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			table {
				margin-left: auto;
				margin-right: auto;
			}

			h4 {
				text-align: center;
			}
		</style>
		<script>
			var delA = function() { //删除tr的单击响应函数
				//点击超链接以后，需要删除超链接所在的哪一行
				var tr = this.parentNode.parentNode;

				//删除之前，弹出一个提示框，
				var flag = confirm("确认删除" + tr.firstElementChild.innerHTML + "吗"); //弹出一个带有确认和取消按钮的提示框
				//需要一个字符串作为参数，该字符串将会作为提示文字显示
				if (flag)
					tr.parentNode.removeChild(tr);
				return false;
				/*
				点击超链接以后，超链接会跳转页面，这是超链接的默认行为
				但是我们不希望出现默认行为，可以通过在响应函数的最后添加return false来取消默认行为。
				*/
			};
			window.onload = function() {
				/*
				点击超链接之后，删除一个员工信息
				*/
				//获取所有超链接
				var alla = document.getElementsByTagName("a");
				//为每一个超连接绑定单击响应函数
				for (var i = 0; i < alla.length; i++) {
					alla[i].onclick = delA;
					var submit = document.getElementById("addEmpButton");
					submit.onclick = function() {
						var table = submit.parentElement.parentElement.parentElement;
						var name = table.querySelector("tr>.inp>#empname").value;
						var email = table.querySelector("tr>.inp>#email").value;
						var salary = table.querySelector("tr>.inp>#salary").value;
						if (!(name && email && salary)) {
							alert("名称,邮箱和薪水均不能为空");
						} else {
							var employee = document.getElementById("employeeTable");
							var newtr = document.createElement("tr");



							// var t1=document.createElement("td");
							// var t2=document.createElement("td");
							// var t3=document.createElement("td");
							// var t4=document.createElement("td");
							// var a=document.createElement("a");
							// a.href="javascript:;";
							// //a.target="_blank";
							// a.innerHTML="Delete";
							// //为新添加的a添加绑定函数
							// a.οnclick=delA;
							// t1.innerHTML=name;
							// t2.innerHTML=email;
							// t3.innerHTML=salary;
							// t4.appendChild(a);
							// newtr.appendChild(t1);
							// newtr.appendChild(t2);
							// newtr.appendChild(t3);
							// newtr.appendChild(t4);
							// employee.appendChild(newtr);
							//获取employeetable中的tbody
							//此时有两种方式进行修改
							newtr.innerHTML = "<td>"+name+"</td>"+
							"<td>"+email+"</td>"+
							"<td>"+salary+"</td>"+
							"<td><a href='javascript:;'>Delete</a></td>";
							var a=newtr.querySelector("td>a");
							a.onclick=delA;

							var tbody = employee.getElementsByTagName("tbody")[0];
							tbody.appendChild(newtr);
						}
					};
				}
			};
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</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>Jerry</td>
				<td>Jerru@sohu.com</td>
				<td>8000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.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>