<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <script type="text/javascript"> window.onload = function(){ // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 var tr=document.getElementsByTagName("tr"); for(var i=0;i<tr.length;i++) { bgchange(tr[i]); } } function bgchange(obj) { obj.onmouseover=function(){ obj.style.backgroundColor="#f2f2f2";} obj.onmouseout=function(){ obj.style.backgroundColor="#fff"; } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; var i=3; function add() { var table=document.getElementById("table"); var node=document.createElement("tr"); var th1=document.createElement("th"); th1.innerHTML="xh00"+i; var th2=document.createElement("th"); th2.innerHTML="第"+i+"个"; var th3=document.createElement("th"); th3.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>" i++; node.appendChild(th1); node.appendChild(th2); node.appendChild(th3); table.appendChild(node) } // 创建删除函数 function del(obj) { var node=obj.parentNode.parentNode; node.parentNode.removeChild(node); } </script> </head> <body> <table border="1" width="50%" id="table"> <tr> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> <tr> <td>xh001</td> <td>王小明</td> <td><a href="javascript:;" onclick="del(this)" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;"onclick="del(this)" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 --> </body> </html>
为什么有两个访问父节点,
var node=obj.parentNode.parentNode;
node.parentNode.removeChild(node); 这两句代码 访问父节点,晕了。
this是a 父节点是td 祖父节点是tr