为了账号安全,请及时绑定邮箱和手机立即绑定

哪位大神可以帮我看看‘增加一行’为什么没效果,跪谢!!

<!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=1;i<trs.length;i++)

       {

         trs[i].onmouseover=function(){

             this.style.backgroundColor="#f2f2f2";

         }

         

         trs[i].onmouseout=function(){

             this.style.backgroundColor="#fff";

         }

       }     

      

}


     // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;

      function AddRow()

      {

        var tbody = document.getElementById("table").lastChild;  

var tr = document.createElement("tr");  

 

var td = document.createElement("td");

td.innerHTML = "<input type='text' />";

tr.appendChild(td);

 

td = document.createElement("td");  

td.innerHTML = "<input type='text' />";

tr.appendChild(td);

 

td = document.createElement("td");

td.innerHTML = "<a href='javascript:;' onclick='DeleteRow(this)'>删除</a>";

tr.appendChild(td);   

tbody.appendChild(tr);   

      }

    

    

    // 创建删除函数

     function DeleteRow(obj)

     {

       var tr=obj.parentNode.parentNode;//tr

       tr.parentNode.removeChild(tr);//tdoby

         

     }

     

     

  </script> 

 </head> 

 <body> 

  <table border="1" width="50%" id="table">

 <tbody><!--一般是省略的-->     

  <tr>

<th>学号</th>

<th>姓名</th>

<th>操作</th>

  </tr>  


  <tr>

<td>xh001</td>

<td>王小明</td>

<td><a href="javascript:;" onclick='DeleteRow(this)'>删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick='DeleteRow(this)' >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  

       </tbody>

  </table>

  <input type="button" value="添加一行" onclick="AddRow()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>


正在回答

2 回答

41行有问题  插入节点的父级错误   tbody.appendChild(tr);   

改为table

0 回复 有任何疑惑可以回复我~

感谢,是成功了,但是不是应该吧tr加到tbody里吗??有点不明白!

0 回复 有任何疑惑可以回复我~
#1

SoraAsuka

var tbody = document.getElementById("table").lastChild 这行有问题 你这里定义的tbody指的是 刘小芳所在的<tr>这个节点 改成 var tbody=document.getElementsByTagName("tbody"); 或者就按一楼的改就行了
2017-03-20 回复 有任何疑惑可以回复我~
#2

SoraAsuka 回复 SoraAsuka

好吧 我看错了 var tbody = document.getElementById("table").lastChild 这个写法是对的.但是为了避免错误 就把tbody这个标签忽略掉编程 一般不会出错误
2017-03-20 回复 有任何疑惑可以回复我~
#3

套子里的海怪

你没有创建tbody,你给他添加tr,他会一脸懵逼。
2017-03-20 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

哪位大神可以帮我看看‘增加一行’为什么没效果,跪谢!!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信