无法增加行

任务要求:

制作一个表格,显示班级的学生信息。

要求:

1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff

2. 点击添加按钮,能动态在最后添加一行

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>



默语eating
浏览 1192回答 2
2回答

pardon110

没有说不能同时使用,只是告诉你一个常识问题,像你写的如下这句全是双引号,js解析器依据最近优原则很可能先配对双引号"<a href="javascript:;" onclick="del(this)">删除</a>"; 解析从上往下从左到右的解析,它可能认为是这样"<a href="                                     字符串javascript:;                                    变量" onclick="                                字符串                del(this)                                    函数调用">删除</a>"                           字符串而"<a href='javascript:;' onclick='del(this)'>删除</a>"则不同,它只会认为双引号间只是字符串,不会解析。其实,有些问题,你自己细心思考一下,就能明白。

pardon110

打开控制台调试,发现点击增加行就报语法错误。改正后,就ok了。在addtr()函数内改相关语句代码改成这样。  td3.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>";错误原因:单双引号使用的问题。如果不清楚使用,就用+连接拼接字符串。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript