课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

请教大神：window.onload 为什么只包含鼠标事件，不包含新增行和删除行函数？

来源：9-22 编程练习

beiyanwanjun

2018-06-01 11:45

window.onload = function()  如果包含添加行和删除行函数时，会使添加和删除函数失效，为什么？


<!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(){

                  

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

     function changec(obj)

      { obj.style.backgroundColor ="#f2f2f2";

      }

      var row = document.getElementsByTagName("tr"); 

  

  for (var i=0;i<row.length;i++)

  { row[i].onmouseover=changec(row[i]);

 

}


      }

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

     function addrow()

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

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

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

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

      

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

        var tab = document.getElementById("table");

          tab.appendChild(newrow);  

          newrow.appendChild(td1);

          newrow.appendChild(td2);

          newrow.appendChild(td3);

      

     }

     // 创建删除函数

     function delrow(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="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>


写回答 关注

1回答

  • 慕婉清0528570
    2018-06-03 15:59:39

    在添加函数中，你是把 tr 标签添加到了 table 下，而事实一般情况 table 下还习惯性省略了 tbody 标签，你应该是把 tr 添加到 table 的子节点 tbody 下。

    var tbody = document.getElemntById('table').lastChild;       // table 就两个子节点（一个空白节点、一个tbody）
var tr = document.cretaElement('tr');

var td = document.cretaEelment('td');
td.innerHTML = "<input type='text' />";
tr.appendChild(td);

...

tbody.appendChild(tr);   // 就tr 添加到 tbody 下
    0 1

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题

请教大神：为什么鼠标移上事件不生效？

回答 3

哪位大神帮我看看，怎么删除函数只能删除<a>标签，而不能删除整行？

回答 1

为什么新添加的行不能实现鼠标经过和移除事件

回答 2

删除函数 没办法删除 用js新增的<tr>行

回答 2

删除函数这样为什么不行呢？

回答 1

打开慕课网App查看更多内容