任务要求：制作一个表格，显示班级的学生信息。要求：1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff2. 点击添加按钮，能动态在最后添加一行3. 点击删除按钮，则删除当前行下面是代码。求大神帮忙看一下到底有什么问题啊，盯了一个晚上了，实在看不出有什么问题啊？主要问题就是无法添加一行，按钮没用啊，调用不了！拜托拜托！ <!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 trs = document.getElementsByTagName('tr'); for(var i = 0; i < trs.length; i++){ trs[i].onmouseover = function(){ this.style.backgroundColor = "#f2f2f2"; } trs[i].onmouseout = function(){ this.style.backgroundColor = "#fff"; } } } // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点； function addtr(){ var xh=prompt("输入学号"); var xm=prompt("输入姓名"); if(xh!=null&&xh!=""&&xm!=null&&xm!="") { var table=document.getElementById("table").lastChild; var tr=document.createElement("tr"); var td1=document.createElement("td"); td1.innerHTML=xh; var td2=document.createElement("td"); td2.innerHTML=xm; var td3=document.createElement("td"); td3.innerHTML="<a href="javascript:;" onclick="del(this)">删除</a>"; table.appendChild(tr); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); } else alert("姓名学号不可以为空！"); } // 创建删除函数 function del(obj){ var tr=obj.parentNode.parentNode; tr.parentNode.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="addtr()" /> <!--在添加按钮上添加点击事件 --> </body></html>
2 回答
pardon110
TA贡献1038条经验 获得超227个赞
没有说不能同时使用，只是告诉你一个常识问题，
像你写的如下这句全是双引号，js解析器依据最近优原则很可能先配对双引号
"<a href="javascript:;" onclick="del(this)">删除</a>";
解析从上往下从左到右的解析，它可能认为是这样
"<a href=" 字符串
javascript:; 变量
" onclick=" 字符串
del(this) 函数调用
">删除</a>" 字符串
而"<a href='javascript:;' onclick='del(this)'>删除</a>"则不同，它只会认为双引号间只是字符串，不会解析。
其实，有些问题，你自己细心思考一下，就能明白。
pardon110
TA贡献1038条经验 获得超227个赞
打开控制台调试，发现点击增加行就报语法错误。改正后，就ok了。
在addtr()函数内改相关语句代码改成这样。
td3.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>";
错误原因：单双引号使用的问题。
如果不清楚使用，就用+连接拼接字符串。
添加回答
举报
0/150
提交
取消