课程

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

为什么新添加的没有鼠标已经过事件？为什么删除新添加的那一栏就全部删完了？

来源：9-22 编程练习

稻草人666

2018-07-26 21:00

<!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++)

        {

            bgChange(tr[i]);    

        }

}

 

function bgChange(obj){

   obj.onmouseover=function(){

       obj.style.backgroundColor=" #f2f2f2";

   }

   obj.onmouseout=function(){

       obj.style.backgroundColor="#fff";

   }

}

    

    function Add(){

        var no = prompt("请输入学号：", "");

        var name = prompt("请输入姓名：","");

        if(no!=null&&name!=null&&no!=""&&name!="")

        {

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

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

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

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

            var newno = document.createTextNode(no);

            var newname = document.createTextNode(name);

            td1.appendChild(newno);

            td2.appendChild(newname);

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

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

            table.appendChild(tr);

            table.appendChild(td1);

            table.appendChild(td2);

            table.appendChild(del);

            window.onload = function(){

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

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

                {

                    bgChange(add_tr[i]);    

                }

        }

        }

        else{

            alert("姓名和学号不能为空，请重新输入！");

            Add();

        }

    }

     

    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="Add()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>



写回答 关注

2回答

  • 小胖_
    2018-08-03 13:49:20

    你应该在add()方法中调用bgChange()，新增加的才会有鼠标经过的事件。

    var tr = obj.parentNode.parentNode;

    这个就是找到tr这个元素节点赋值给tr

    tr.parentNode.removeChild(tr);

    tr的父节点就是table，removeChild(tr)就是在父节点下把tr整个节点删除

    0 0
  • S_DRAGON
    2018-07-28 15:31:13

     tr.parentNode.removeChild(tr);

    因为删除的是tr的父节点的整个子节点

    0 0

JavaScript进阶篇

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

468194 学习 · 21891 问题

查看课程

相似问题

为什么新添加的行没有鼠标经过事件

回答 3

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

回答 2

添加的一行为什么删除不了

回答 2

能添加新的，能删除新的，就是不能删除旧的

回答 2

为什么点了添加一行之后 就没有鼠标经过的效果了

回答 2

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