<!DOCTYPE html> <html> <head> <title>节点添加与删除练习</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div { text-align: center; background-color: #c0c0c0; width: 65%; height: 65%; } </style> <script type="text/javascript"> //要求:动态向table中添加信息，并可以删除 window.onload = function() { /* 当点击按钮时，将信息得到，并手动封装成字符串 "<tr><td>username</td><td>email</td><td>telephone</td><td><a href='#' onclick='delRow(this)'>Delete</a></td></tr>" 得到id为tab的table，合适innerHTML+=上面的字符串. 问题:当点击超链接时，怎样删除当前行. 当超链接被点击时，调用一个delRow方法，将this传递到delRow方法中. 在delRow方法中可以通过 parentNode.parentNode得到最终要删除的tr。 在通过table调用removeChild方法将这一行删除。 */ document.getElementById("btn").onclick=function(){ //1.得到信息. var username=document.getElementById("username").value; var email=document.getElementById("email").value; var telephone=document.getElementById("telephone").value; //2.拼出字符串. var msg="<tr><td>"+username+"</td><td>"+email+"</td><td>"+telephone+"</td><td><a href='#' onclick='delRow(this)'>Delete</a></td></tr>" //3.将msg添加到table中. document.getElementById("tab").innerHTML+=msg; document.getElementById("username").value=""; document.getElementById("email").value=""; document.getElementById("telephone").value=""; } }; function delRow(t){ document.getElementById("tab").removeChild(t.parentNode.parentNode.parentNode); //t.parentNode.parentNode.parentNode.removeChild(t.parentNode.parentNode); } </script> </head> <body> <div> <br> <br> 姓名: <input type="text" id="username"> EMAIL: <input type="text" id="email"> 电话: <input type="text" id="telephone"> <br> <br> <input type="button" value="添加" id="btn"> <hr> <table id="tab" border='1' align="center" width="85%"> <tr> <th>姓名</th> <th>EMAIL</th> <th>电话</th> <th>操作</th> </tr> </table> </div> </body> </html>