效果:实现增删改列表操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1#0">
<title>Document</title>
<style>
table{
border-collapse: collapse;
text-align: center;
}
table td,th,tr{
border: 1px solid #000;
}
#employeeTable td, #employeeTable th, #employeeTable tr{
width: 80px;
height: 30px;
}
</style>
<script type="text/javascript">{
//删除函数
function delA(){
var tr= this.parentNode.parentNode;
var name=tr.children[0].innerHTML;
var flag=confirm("Are you sure to delece "+name+" ?");
if(flag){
tr.parentNode.removeChild(tr);
}
return false;
}
window.onload=function(){
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
a[i].onclick=delA;
}
//添加员工功能
/*
* -点击按钮,员工信息添加到表格
*/
//为提交按钮绑定单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick=function(){
//获取用户添加的员工信息
//获取员工的名字
var name = document.getElementById("empName").value;
//获取员工的年龄
var age = document.getElementById("age").value;
//获取员工的工资
var salary = document.getElementById("salary").value;
//获取的信息保存到tr中
/*<tr>
<td>Ankry</td>
<td>21</td>
<td>10000</td>
<td><a href="deleteEmp?id=001">Delect</a></td>
</tr>*/
var tr=document.createElement("tr");
tr.innerHTML="<td>"+name+"</td>"+
"<td>"+age+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delect</a></td>";
//获取刚刚添加的a元素,并为其绑定单机响应函数
var a=tr.getElementsByTagName("a")[0];
a.onclick=delA;
//太繁琐↓↓↓
// var tr=document.createElement("tr");
// var nameTd=document.createElement("td");
// var ageTd=document.createElement("td");
// var salaryTd=document.createElement("td");
// var aTd=document.createElement("td");
// var a=document.createElement("a");
// //创建文本节点
// var nameText=document.createTextNode(name);
// var ageText=document.createTextNode(age);
// var salaryText=document.createTextNode(salary);
// var delText=document.createTextNode("Delect");
// //将文本添加到td中
// nameTd.appendChild(nameText);
// ageTd.appendChild(ageText);
// salaryTd.appendChild(salaryText);
// //向a中添加文本和td中
// a.appendChild(delText);
// aTd.appendChild(a);
// //向a中添加属性
// a.href="javascript:;";
// //为新添加的a再绑定一次单击响应函数
// a.onclick=delA;
// //将td添加到tr中
// tr.appendChild(nameTd);
// tr.appendChild(ageTd);
// tr.appendChild(salaryTd);
// tr.appendChild(aTd);
//获取table
var employeeTable=document.getElementById("employeeTable");
employeeTable.appendChild(tr);
//获取employeeTable中的tbody
var tbody=employeeTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
//以下的有隐患
// tbody.innerHTML+="<tr>"+
// "<td>"+name+"</td>"+
// "<td>"+age+"</td>"+
// "<td>"+salary+"</td>"+
// "<td><a href='javascript:;'>Delect</a></td>"
// +"</tr>";
};
};
}
</script>
</head>
<body>
<div class="table">
<table id="employeeTable">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>SALARY</th>
<th> </th>
</tr>
<tr>
<td>Ankry</td>
<td>21</td>
<td>10000</td>
<td><a href="deleteEmp?id=001">Delect</a></td>
</tr>
<tr>
<td>Vicky</td>
<td>23</td>
<td>10000</td>
<td><a href="deleteEmp?id=002">Delect</a></td>
</tr>
<tr>
<td>Minline</td>
<td>24</td>
<td>11000</td>
<td><a href="deleteEmp?id=003">Delect</a></td>
</tr>
</table>
</div>
<div class="formDiv">
<h2>Creat A New Staff</h2>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">age: </td>
<td class="inp">
<input type="text" name="age" id="age" />
</td>
</tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>