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

1鼠标停留划过都没有看到有颜色变化;2 onload=function()为什么没有函数名? 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 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 回答

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

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

慕九州2495636

补充一下,默认的那两行是table>tbody>tr ,你添加的是table>tr,所以你写的del函数也只能对你自己添加tr的有用,因为parentNode一样
2018-08-13 回复 有任何疑惑可以回复我~

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

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

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

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

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

十一一一一一一一

this 是关键字 代表当前对象 在这里就是作为参数将input标签这个对象 传递到del(obj) 函数中 并用 obj 接收该对象 然后在下面代码中 obj 引用的就是 input 标签这个对象
2018-09-10 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

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