要实现的界面为：
界面的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> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Th</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Tx</td>
<td>[email protected]</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>