ry836478606
2016-03-27 19:52
<!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 gettr = document.getElementsByTagName("tr"); for(var i=0;i<gettr.length;i++) { gettr[i].onmouseout=function(){this.style.backgroundColor="#fff";} gettr[i].onmouseover=function(){this.style.backgroundColor="#f2f2f2";} } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; function addRow() { var getRowP = document.getElementsById("table"); var newRow = document.createElement("tr"); for(var i=0;i<2;i++) { var newtd[i]=document.createElement("td"); newtd[i].innerHTML="<input type = 'text' />" newRow.appendChild(newts[i]); } getRowP.appendChild(newRow); } // 创建删除函数 function delRow(obj) { var getRowP = document.getElementById("table"); var tr = obj.parentNode.parentNode; getRowP.removeChild(tr); } </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>
哪里出错???
//我有一个调试的经验,你先把其它的函数注释掉,留下一个函数;一个一个的调。这儿我调试了一下删除函数。
//我一行一行加 alert("hello") 发现 getRowP.removeChild(tr);执行不了,看代码tr的父节点应该是getRowP,怎么回事呢?
//我测一下tr的父节点是不是getRowP,加了这一段
var ftr=tr.parentNode;
alert(ftr) ;
alert(ftr.isEqualNode(getRowP)) ;
结果是false,弹出ftr,显示tablesection objection;这一点我也不知道为什么。让var getRowP= obj.parentNode.parentNode.parentNode;结果就正常了。希望能对你有帮助。
//
function delRow(obj)
{
var getRowP = document.getElementById("table");
// var getRowP= obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
/* {
var ftr=tr.parentNode;
alert(ftr) ;
alert(ftr.isEqualNode(getRowP)) ;
}
*/
getRowP.removeChild(tr);
// alert("hello") ;
}
我给你指出错误代码的地方,和改正方法:
59:a href="javascript:;"onclick="delRow(this)" onclick前面缺少空格
然后是你的addraw有问题:var 对象是不能对一个数组进行循环插入的(不确定) 这个你可以私下尝试,用for循环进行循环创建不提倡。
JavaScript进阶篇
468192 学习 · 21891 问题
相似问题