求异同,这两个代码差在哪,一个能正常运行,另一个却不能

来源:9-22 编程练习

劷鹿

2015-07-21 19:42

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   

  <script type="text/javascript"> 

  

      window.onload = function(){

          var tr=document.getElementsByTagName("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";

        }

}

   

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

     var num=2;

     function add(){

        num++;

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

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

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

        xh.innerHTML="xh00"+num;

        xm.innerHTML="第"+num+"学生";

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

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

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

        tab.appendChild(tr);

        tr.appendChild(xh);

        tr.appendChild(xm);

        tr.appendChild(del);

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

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

          {

              bgcChange(tr[i]);

          }

     }

     

     // 创建删除函数

     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>


写回答 关注

3回答

  • J丶_0
    2015-07-21 23:52:41

    这个其实还是有点小问题的,你每次增加或者删除都要遍历tr 否则新加的是没有绑定 移入移出事件的,遍历的方法封装成函数,增加或者删除都在执行一遍

    劷鹿

    ok,谢谢

    2015-07-29 09:13:34

    共 1 条回复 >

  • J丶_0
    2015-07-21 23:44:57

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

              tr[i].onmouseover=function(){

                this.style.backgroundColor="#efefef";

              }

              tr[i].onmouseout=function(){

               this.style.backgroundColor="#fff";

              }

            }

    这样就好了

    劷鹿

    this而非tr[i],请问这样做的原理是什么,在这this不就是指的tr[i]么?

    2015-07-29 09:11:23

    共 2 条回复 >

  • 劷鹿
    2015-07-21 19:43:43

    另一个不能运作的代码;

    <!DOCTYPE HTML>

    <html>

      <head>

        <!-- 不要丢失‘-’ -->

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 

        <title>DOM</title>

        <script type="text/javascript">

          window.onload=function(){

            var tr=document.getElementsByTagName('tr');

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

              tr[i].onmouseover=function(){

                tr[i].style.backgroundColor="#efefef";

              }

              tr[i].onmouseout=function(){

                tr[i].style.backgroundColor="#fff";

              }

            }

          }

          function add(){

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

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

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

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

            var num = document.getElementsByTagName("tr").length;

            td1.innerHTML="xh00"+num;

            td2.innerHTML="number"+num;

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

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

            table.appendChild(tr);

            tr.appendChild(td1);

            tr.appendChild(td2);

            tr.appendChild(td3);

          }

          function del(obj){

            

            var tr=obj.parentNode.parentNode;

            tr.parentNode.removeChild(tr);

          }

          

        </script>

      </head>

      <body>

        <table border="1" width="50%" cellspacing="0" 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>

        <br><br>

        <input type="button" value="添加一行" onclick="add()" >

      </body>

    </html>


JavaScript进阶篇

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

468194 学习 · 21891 问题

查看课程

相似问题