点击submit 添加一条员工信息
点击delete 删除一条信息
代码如下：
往表格里添加信息时，第一种构建表格的方法：
//创建4个td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
//创建一个a标签
var a = document.createElement("a");
aTd.appendChild(a);
//重新为a绑定单击响应函数
a.onclick = delA;
//为4个td创建文本内容
nameTd.innerHTML = name;
emailTd.innerHTML = email;
salaryTd.innerHTML = salary;
a.innerHTML = "Delete";
a.href = "javascript:;";
//将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
第二种方法(代码完整)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//点击链接，删除一个tr
function delA(){
//点击谁 this就是谁
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
// var name = tr.children[0].innerHTML;
var name = tr.getElementsByTagName("td")[0].innerHTML;
var flag = confirm("确认删除"+name+"的信息吗？");
if (flag) {
tr.parentNode.removeChild(tr);
}
return false; //取消超链接的默认跳转行为
}
window.onload = function(){
/**
* 点击超链接，删除一条员工信息
*/
//获取所有a标签
var allA = document.getElementsByTagName("a");
for (var i = 0 ; i < allA.length ; i++){
allA[i].onclick = delA;
}//for
/**
* 添加一条员工信息
*/
var addBtn = document.getElementById("addBtn");
addBtn.onclick = function(){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//向表格添加一条记录
var table = document.getElementById("employeeTable");
var tbody = document.getElementById("empTbody");
var tr = document.createElement("tr");
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href = 'javascript:;'>Delete</a>";
var a = tr.getElementsByTagName("a")[0];
a.onclick = delA;
//将tr添加到table中
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<div id="employeeDiv">
<table id="employeeTable" border="">
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>工资</th>
<th>操作</th>
</tr>
<tbody id="empTbody">
<tr>
<td>Tom</td>
<td>Tom@tom.com</td>
<td>3000</td>
<td><a href="">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>Bob@bob.com</td>
<td>32000</td>
<td><a href="">Delete</a></td>
</tr>
<tr>
<td>Sam</td>
<td>Sam@sam.com</td>
<td>2600</td>
<td><a href="">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<div id="formDiv">
<table>
<tr>
<td>name:</td>
<td><input type="text" name="name" id="name" value="" /></td>
</tr>
<tr>
<td>email:</td>
<td><input type="text" name="email" id="email" value="" /></td>
</tr>
<tr>
<td>salary:</td>
<td><input type="text" name="salary" id="salary" value="" /></td>
</tr>
<tr>
<td colspan="5" align="center">
<button id="addBtn" value="abc">submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
