增删改员工信息

最新推荐文章于 2023-04-04 20:03:57 发布

易拉易拉罐

最新推荐文章于 2023-04-04 20:03:57 发布

阅读量202

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wuxiao18/article/details/97389659

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

修改了超链接的默认样式；运用了新的警告框；实现了员工信息的增删改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>更改员工信息</title>
		<style type="text/css">
			/*设置信息框样式*/
			#employeeTable,#employeeTable td,#employeeTable th,#employeeTable tr{
				border:1px solid black;				
			}
			/*设置表格的边框是否被合并为一个单一的边框，可以将此样式注释掉再看效果有什么不同*/
			#employeeTable{
				  border-collapse:collapse;
			}
			
		</style>
		
		<script type="text/javascript">
			//删除tr的响应函数
			function deltr(){				
				//点击某一行超链接时获取当前这一行tr
				var tr=this.parentNode.parentNode;
				
				//删除前有提示
				/*
				 * confirm()带有确认和取消按钮的提示框
				 * 如果用户点击确认会返回true，如果点击取消返回false
				 */
				//获取名字
				var name=tr.getElementsByTagName("td")[0].innerHTML;
				
				var flag=confirm("确认删除"+name);
				
				//删除tr
				if(flag){
					tr.parentNode.removeChild(tr);
				}
				
				/*
				 * 点击超链接后跳转页面是默认行为
				 * 但是此时不希望出现默认行为，可以在响应函数末尾return false取消默认行为
				 * 或者是设置超链接href="javascript:;"
				 */
				return false;
			};
			window.onload=function(){
				//点击超链接后删除
				
				//获取所有超链接
				var allA=document.getElementsByTagName("a");
				//为每个超链接都绑定一个单响应函数
				for(var i = 0 ; i < allA.length; i ++){
                            /*for循环会在页面加载之后立即执行，而响应函数在超链接被点击时再执行*/
					allA[i].onclick=deltr;
				}
				
			//点击按钮后添加	
			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>
				 * 	<td> </td>
				 *  <td> </td>
				 *  <td> </td>
				 *  <td><a href="javascript:;">Delect</a></td>
				 * </tr>
				 */
				//需要将获取的信息保存到tr中
				var tr=document.createElement("tr");
				/*var nameTd=document.createElement("td");
				var emailTd=document.createElement("td");
				var salaryTd=document.createElement("td");
				var aTd=document.createElement("td");
				
				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);
				//将delete添加到a中
				a.appendChild(deltext);
				//将a添加到td中
				aTd.appendChild(a);
				//将td添加到tr中
				tr.appendChild(nameTd);
				tr.appendChild(emailTd);
				tr.appendChild(salaryTd);
				tr.appendChild(aTd);
				
				//向a中添加href属性
				a.href="javascript:;";
				a.onclick=deltr;*/
				
				/*用更简便的方法实现上一段代码*/
				tr.innerHTML="<td>"+name+"</td>"+
							"<td>"+email+"</td>"+
							"<td>"+salary+"</td>"+
							"<td><a href='javascript:;'>Delete</a></td>";
				//获取a并设置单击响应函数
				tr.getElementsByTagName("a")[0].onclick=deltr;
				//获取table
				var employeeTable = document.getElementById("employeeTable");
				//获取 employeeTable中的tbody
				var tbody = employeeTable.getElementsByTagName("tbody")[0];
				tbody.appendChild(tr);
			};
			
		}
		</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="deleteEmp?id=001">Delete</a></td>
			</tr>
			
			<tr>
				<td>Jerry</td>
				<td>Jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			
			<tr>
				<td>Bob</td>
				<td>Bob@sohu.com</td>
				<td>1000</td>
				<td><a href="deleteEmp?id=003">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">Submit</button>
					</td>
				</tr>
			</table>
			
		</div>
		
	</body>
</html>