添加和删除都没有用
<!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 rows=document.getElementsByTagName("tr"); for(var i=0;i<rows.length;i++){ rows[i].onmouseover=function(){ this.style.backgroundColor="#f2f2f2";} rows[i].onmouseout=function(){ this.style.backgroundColor="#fff";} } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; function addrow(){ var row=document.createElement("tr"); var tab=document.getElementById("table"); var number=document.createElement("td"); number.innerHTML="xh###"; row.appendChild(number); var name=document.createElement("td"); name.innerHTML="###"; row.appendChild(name); var operator=document.createElement("td"); var atag=document.createElement("a"); a.href="javascript:;"; a.onclick="delrow(this)"; a.innerHTML="删除"; operator.appendChild(atag); row.appendChild(operator); tab.appendChild(row); } // 创建删除函数 function delrow(obj){ var theRow=this.parentNode.parentNode; theRow.parentNode.removeChild(theRow); } </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="delrow(this)" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="delrow(this)" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" onclick="addrow()" /> <!--在添加按钮上添加点击事件 --> </body> </html>
添加和删除方法都没有反应。
还有为什么答案里通过ID获得table元素时后面跟着".lastChild",这不就变成了tr了么,最后添加行时又用了appendChild, 添加的不就成了tr的子节点了么