javascipt(19)练习-增删员工表

如图，点击Delete删除员工信息
在下面的输入框中，输入name，email，salary，点击提交，即可将信息添加到上面的员工信息表中

这是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@Jerry.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Ford</td>
				<td>Ford@tom.Ford</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		
		<div>
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td >name: </td>
					<td >
						<input type="text" name="empName" id="empName" >
					</td>
				</tr>
				<tr>
					<td >email: </td>
					<td >
						<input type="text" name="email" id="email" >
					</td>
				</tr>
				<tr>
					<td >salary: </td>
					<td >
						<input type="text" name="salary" id="salary" >
					</td>
					<td><button id="but01">submit</button></td>

				</tr>
			</table>
		</div>

这是script部分的代码：

<script>
			
			window.onload=function(){
				//为每个超链接绑定函数
				var allA=document.getElementsByTagName("a");
				for(var i=0;i<allA.length;i++){
					//这里一定要是对象，不能使函数（没有括号）
					//不然会出现："Uncaught TypeError: Cannot read property 'parentNode' of undefined"
					allA[i].onclick=del;
				}
				//为submit绑定响应函数
				var sub=document.getElementById("but01");
				sub.onclick=function(){
					var empName=document.getElementById("empName").value;
					var email=document.getElementById("email").value;
					var salary=document.getElementById("salary").value;
					
					var tr=document.createElement("tr");
					tr.innerHTML="<td>"+empName+"</td>"+
									"<td>"+email+"</td>"+
										"<td>"+salary+"</td>"+
											"<td><a>Delete</a></td>";
					//为超链接添加功能						
					var a=tr.getElementsByTagName("a")[0];
					a.href="javascript:;";
					a.onclick=del;
					//添加到table的tbody中，以便能应用到css的效果
					var tbody=document.getElementsByTagName("tbody")[0];
					tbody.appendChild(tr);
					
				};
			};
			//超链接a的单击相应函数，删除一行信息
			function del(){
				//点击哪个choalianjiea，this就是哪个
				//通过超链接的点击，this就是超链接a
				//获取将被删除的行
				var tr=this.parentNode.parentNode;
				//确认是否删除
				var name=tr.getElementsByTagName("td")[0].innerHTML;
				//confirm() 弹出一个带有确定和取消按钮的对话框
				//	参数 一个会显示在对话框上的字符串
				//	返回值 点击确定true,点击取消false
				var bool=confirm("确定要删除:"+name+"吗？");
				//删除行，或者不删除
				if(bool){
					//通过tr的父节点的removeChild方法来删除tr
					//也就是我删我自己
					tr.parentNode.removeChild(tr);
				}
				//超链接不跳转
				//超链接默认是跳转页面的的，返回值为false就不会跳转
				return false;
			//"Uncaught TypeError: Cannot read property 'parentNode' of undefined"
			};
		</script>