网页操作界面
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/faff782f699040b2c4f7a3689285e5f9.png)
HTML代码
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </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>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</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>
CSS代码
@CHARSET "UTF-8";
#total {
width: 450px;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
}
li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin: 10px;
padding: 10px;
float: left;
}
#employeeTable {
border-spacing: 1px;
background-color: black;
margin: 80px auto 10px auto;
}
th,td {
background-color: white;
}
#formDiv {
width: 250px;
border-style: solid;
border-width: 1px;
margin: 50px auto 10px auto;
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
JavaScript代码
<script type="text/javascript">
function del(){
var tr = this.parentNode.parentNode;
var name = tr.children[0].innerHTML;
var flag = confirm("确认删除"+name+"员工吗?");
if(flag){
tr.parentNode.removeChild(tr);
}
return false;
}
window.onload = function(){
var allA = document.getElementsByTagName("a")
for(var i=0;i<allA.length;i++){
allA[i].onclick = del;
}
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;
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 name_text = document.createTextNode(name);
var email_text = document.createTextNode(name);
var salary_text = document.createTextNode(name);
var a_text = document.createTextNode("Delete");
nametd.appendChild(name_text);
emailtd.appendChild(email_text);
salarytd.appendChild(salary_text);
a.appendChild(a_text);
atd.appendChild(a);
tr.appendChild(nametd);
tr.appendChild(emailtd);
tr.appendChild(salarytd);
tr.appendChild(atd);
a.href = "javascript:;";
a.onclick = del;
var employeeTable = document.getElementById("employeeTable");
var tbody = employeeTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
}
};
</script>