1鼠标停留划过都没有看到有颜色变化;2 onload=function()为什么没有函数名? 3原有两行点了删除无反应,新添一行删除却有反应

来源:9-22 编程练习

qq_Hy_49

2018-08-08 13:46

<!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.getElementByTagName("tr");

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

        bgcChange(tr[i]);

}

function bgcChange(obj)

     {

         obj.onmouseover=function(){

             obj.style.backgroundColor="#f2f2f2";

         }

         obj.onmouseout=function(){

             obj.style.backgroundColor="#fff";

         }

     }

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

     function add()

     {

         var xh=prompt("请输入学号");

         var xm=prompt("请输入姓名");

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

         var newtr=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(newtr);

         newtr.appendChild(td1);

         newtr.appendChild(td2);

         newtr.appendChild(td3);

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

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

        bgcChange(tr[i]);

     }

   

     

     // 创建删除函数

     function del(obj)

     {

         var x=obj.parentNode.parentNode;

         document.getElementById("table").removeChild(x);

     }



  </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>


写回答 关注

3回答

  • 慕九州2495636
    2018-08-13 15:48:36

    我测试的时候发现document.getElementById("table") 这个找到的是table没错,但是table下面其实还有一层"tbody",所有的tr 都在tbody下

    慕九州249...

    补充一下,默认的那两行是table>tbody>tr ,你添加的是table>tr,所以你写的del函数也只能对你自己添加tr的有用,因为parentNode一样

    2018-08-13 15:52:08

    共 1 条回复 >

  • qq_10Q币_0
    2018-08-08 17:44:45

      var tr=document.getElementByTagName("tr"); 这句错了,改成getElementmentsByTagName("tr");

      this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。这里应该指的<a>元素。

  • qq_Hy_49
    2018-08-08 13:46:40

    del(this)这里的this不懂是什么意思 求详解

    十一一一一一...

    this 是关键字 代表当前对象 在这里就是作为参数将input标签这个对象 传递到del(obj) 函数中 并用 obj 接收该对象 然后在下面代码中 obj 引用的就是 input 标签这个对象

    2018-09-10 14:21:34

    共 1 条回复 >

JavaScript进阶篇

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

468060 学习 · 21891 问题

查看课程

相似问题