实现效果：
删除函数
var del = function(){
var tr = this.parentNode.parentNode;
var name = tr.getElementsByTagName("td")[0].innerHTML;
if(confirm("确定删除"+name+"吗？")){
tr.parentNode.removeChild(tr);
}
return false;
}
单击删除事件
var a_list = document.getElementsByTagName("a");
for(var i = 0; i<a_list.length; i++){
a_list[i].onclick = del;
};
添加信息
document.getElementById('sub').onclick = function(){
//查找姓名
var name = document.getElementById('addname').value;
//邮箱
var email = document.getElementById('addemail').value;
//联系方法
var tel = document.getElementById('addtel').value;
//创建一个tr
var tr = document.createElement("tr");
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+tel+"</td>"+
"<td><a href=''>删除信息</a></td>";
var a = tr.getElementsByTagName("a")[0];
a.onclick = del;
//找到tbody
var tbody = document.getElementsByTagName("tbody")[0];
//将tr放在tbody内
tbody.appendChild(tr);
}
css代码
div{
margin-top: 20px;
}
#sub{
margin-left: 100px;
}
html代码
<div>
<table border="1px" id="tab1">
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>联系方式</th>
<th> </th>
</tr>
<tr>
<td>苏凉</td>
<td>[email protected]</td>
<td>123</td>
<td><a href="">删除信息</a></td>
</tr>
<tr>
<td>suliang</td>
<td>[email protected]</td>
<td>4253</td>
<td><a href="">删除信息</a></td>
</tr>
</table>
</div>
<div>
<table border="1px" id="tab2">
<tr>
<th colspan="2" >添加信息</th>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" id="addname" name="name"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="addemail" name="email"></td>
</tr>
<tr>
<td>联系方式：</td>
<td><input type="text" id="addtel" name="tel"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="sub"></td>
</tr>
</table>
</div>
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//删除
var del = function(){
var tr = this.parentNode.parentNode;
var name = tr.getElementsByTagName("td")[0].innerHTML;
if(confirm("确定删除"+name+"吗？")){
tr.parentNode.removeChild(tr);
}
return false;
}
window.onload = function(){
var a_list = document.getElementsByTagName("a");
for(var i = 0; i<a_list.length; i++){
a_list[i].onclick = del;
};
document.getElementById('sub').onclick = function(){
//查找姓名
var name = document.getElementById('addname').value;
//邮箱
var email = document.getElementById('addemail').value;
//联系方法
var tel = document.getElementById('addtel').value;
//创建一个tr
var tr = document.createElement("tr");
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+tel+"</td>"+
"<td><a href=''>删除信息</a></td>";
var a = tr.getElementsByTagName("a")[0];
a.onclick = del;
//找到tbody
var tbody = document.getElementsByTagName("tbody")[0];
//将tr放在tbody内
tbody.appendChild(tr);
}
}
</script>
<style>
div{
margin-top: 20px;
}
#sub{
margin-left: 100px;
}
</style>
</head>
<body>
<div>
<table border="1px" id="tab1">
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>联系方式</th>
<th> </th>
</tr>
<tr>
<td>苏凉</td>
<td>[email protected]</td>
<td>123</td>
<td><a href="">删除信息</a></td>
</tr>
<tr>
<td>suliang</td>
<td>[email protected]</td>
<td>4253</td>
<td><a href="">删除信息</a></td>
</tr>
</table>
</div>
<div>
<table border="1px" id="tab2">
<tr>
<th colspan="2" >添加信息</th>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" id="addname" name="name"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="addemail" name="email"></td>
</tr>
<tr>
<td>联系方式：</td>
<td><input type="text" id="addtel" name="tel"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="sub"></td>
</tr>
</table>
</div>
</body>
</html>