樱桃丸子5_1
2015-08-25 20:21
<!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++) { bgcChange(tr[i]); } } function bgcChange(a) { a.onmouseover=function() { a.style.backgroundColor="#f2f2f2"; } a.onmouseout=function() { a.style.backgroundColor="#fff"; } } // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点; var num=2; function add() { num++; var tr=document.createElement("tr"); var xh=document.createElement("td"); var xm=document.createElement("td"); var del=document.createElement("td"); xh.innerHTML="xh00"+num; xm.innerHTML="第"+num+"个学生"; del.innerHTML="<a href='javascript:;' onclick="del(this)">删除</a>"; var tab=document.getElementById("table"); tab.appendChild(tr); tr.appendChild(xh); tr.appendChild(xm); tr.appendChild(del); var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++) { bgcChange(trs[i]); } } } // 创建删除函数 function del(obj) { var tr=obj.parentNode.parentNode.parentNode; table.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="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>
51行那里多了一个一个大括号};还有 del.innerHTML="<a href='javascript:;' onclick="del(this)">删除</a>";
onclick="del(this)“这句要么用这么用onclick=\"del(this)\"用\转义一下,要么就onclick='del(this)'改成单引号;
删除函数改一下
JavaScript进阶篇
468191 学习 · 21891 问题
相似问题