JS笔记第六期（DOM练习）-使用JS实现用户添加删除

转晴喵

于 2024-07-24 20:25:34 发布

阅读量134

点赞数 5

文章标签： javascript 笔记前端

本文链接：https://blog.csdn.net/th891166/article/details/140672492

版权

要实现的界面为：

界面的CSS样式：

*{
	margin: 0 auto;
}
th,td{
			width: 200px;
			height: 50px;
			text-align:center ;
			font-size: 20px;
}
.tBox{
	border: #000000 1px solid;
	width: 450px;
	height: 250px;
	margin: 0 auto;
	padding: 10px;
	
}

JS+HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>增删练习</title>
		<link rel="stylesheet" type="text/css" href="./css/table.css"/>
		<script type="text/javascript">
		window.onload=function(){
			//将删除信息封装为一个函数
			function delA(){
				var tr=this.parentNode.parentNode;
									//获取要删除的员工名字
									var name=tr.getElementsByTagName("td")[0].innerHTML;
									/* 删除之前跳出提示防止误删 
									confirm("确认删除吗？");//会跳出一个有确认和取消的提示框
									返回值是一个布尔值
									*/
				var flag=confirm("确认删除"+name+"吗？");
				if(flag){
									    tr.parentNode.removeChild(tr);
				}
									return false;
									/* 点击超链接以后超链接会自动跳转页面
									 我们不需要这个，可以在响应函数的最后返回false来取消这个行为
									 */
			}
			
			
			/* 
			点击超链接删除员工信息 
			for循环会在页面加载完成后立即执行，响应函数执行时，for循环已经执行完毕
			 */
			var allA=document.getElementsByTagName("a");
			for(var i=0;i<allA.length;i++){
				allA[i].onclick=delA;
			}
			/* 
			添加员工功能
			  -点击按钮之后将员工信息添加到表格 
			 */
			var addEmpButton=document.getElementById("addEmpButton");
			addEmpButton.onclick=function(){
			    //获取用户填写的信息
				var name=document.getElementById("empName").value;
				var email=document.getElementById("email").value;
				var salary=document.getElementById("salary").value;
				//将获取到的信息保存在tr中
				/* 
				方法1：先2创建td ,再创建tr，a,再创建文本， 再保存数据进去巴拉巴拉 
				方法2：见下
				*/
				var tr=document.createElement("tr");//创建一个tr
				//设置tr的值
				tr.innerHTML="<td>"+name+"</td>"
				             +"<td>"+email+"</td>"
				             +"<td>"+salary+"</td>"
							 +"<td><a href='javascript:;'>Delete</a></td>";
				//获取刚刚添加的超链接，并绑定单击事件
				var a=tr.getElementsByTagName("a")[0];
				a.onclick=delA;
				//添加到表格
				var employeeTable=document.getElementById("employeeTable");
				var tbody=employeeTable.getElementsByTagName("tbody")[0];
			    tbody.appendChild(tr);
				
			
			};
		};
		</script>
	</head>
	<body>
		<table id="employeeTable"  border="1" cellspacing="0" >
			<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@123.00</td>
				<td>5000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Th</td>
				<td>th@123.00</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Tx</td>
				<td>tx@123.00</td>
				<td>9000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		<br />	<br />	<br />
		<div id="formDiv" class="tBox">
			<h1 style="text-align: center;">添加新员工</h1>
			<table  >
				<tr>
				<td class="">name:</td>
				<td class="">
					<input type="text" name="empName" id="empName" />
				</td>
				</tr>
				<tr>
				<td class="">email:</td>
				<td class="">
					<input type="text" name="email" id="email" />
				</td>
				</tr>
				<tr>
				<td class="">salary:</td>
				<td class="">
					<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>