实现效果：
删除函数
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>123@qq.com</td> <td>123</td> <td><a href="">删除信息</a></td> </tr> <tr> <td>suliang</td> <td>4253@qq.com</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>123@qq.com</td> <td>123</td> <td><a href="">删除信息</a></td> </tr> <tr> <td>suliang</td> <td>4253@qq.com</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>
