<!DOCTYPE html> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript"> window.onload = function(){ // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 var fu_tr = document.getElementById("table").getElementsByTagName("tr"); for(var i=0; i<fu_tr.length; i++){ fu_tr[i].onmouseover = function(){ this.style.background = "#cccccc"; }; fu_tr[i].onmouseout = function(){ this.style.background = "#ffffff"; }; } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; function adda(){ var tr = document.createElement("tr"); var fu = document.getElementById("table"); var fu_tr = document.getElementById("table").getElementsByTagName("tr")[1]; tr.innerHTML = fu_tr.innerHTML; console.log(tr); fu.appendChild(tr); } // 创建删除函数 function dela(a){ //var fu = document.getElementById("table"); var aa = a.parentNode.parentNode; aa.parentNode.removeChild(aa); } </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="dela(this);" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="dela(this);" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" onclick="adda();" /> <!--在添加按钮上添加点击事件 --> </body> </html>
因为你给添加的<tr>元素没有添加鼠标移入和移除事件,如下:
tr.onmouseover= function(){
this.style.backgroundColor = "#ccc";
};
tr.onmouseout= function(){
this.style.backgroundColor = "#fff";
};
buzhidao a