<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#tb{
margin: 200px auto;
text-align: center;
width: 300px;
background-color: darkgoldenrod;
color: black;
}
.box{
margin: 200px auto;
width: 300px;
height: 200px;
border: 1px #000000 solid;
text-align: center;
padding-top: 10px;
}
input{
margin-top: 20px;
}
</style>
</head>
<body>
<script type="text/javascript">
function dela(){
var tr= this.parentNode.parentNode;
if(confirm("确认删除"+tr.firstElementChild.innerHTML+"嘛")){
tr.parentNode.removeChild(tr);
}
}
window.onload=function(){
var alla=document.getElementsByTagName("a");
for(var i=0;i<alla.length;i++){
alla[i].onclick=dela;
}
var tijiao=document.getElementById("tijiao");
tijiao.onclick=function(){
var name=document.getElementById("name").value;
var emali=document.getElementById("emali").value;
var salary=document.getElementById("salary").value;
var tr=document.createElement("tr");
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+emali+"</td>"+
"<td>"+salary+"</td>"+
"<td>"+"<a href='javascript:;'>"+"删除"+"</a>"+"</td>";
var alla=tr.getElementsByTagName("a")[0];
alla.onclick=dela;
var tb=document.getElementById("tb");
var tbody=tb.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
}
}
</script>
<table border="" id="tb">
<tr>
<td>name</td>
<td>Email</td>
<td>salary</td>
<td> </td>
</tr>
<tr>
<td>zzz1</td>
<td>qqq</td>
<td>dddd</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>zzz2</td>
<td>qqq</td>
<td>dddd</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>zzz3</td>
<td>qqq</td>
<td>dddd</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</table>
<div class="box">
name:<input type="text" id="name" /><br>
email:<input type="text" id="emali" /><br>
salary:<input type="text" id="salary" /><br>
<input type="submit" value="提交" id="tijiao"/>
</div>
</body>
</html>