问答详情
源自：9-22 编程练习

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

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


提问者：劷鹿 2015-07-21 19:42

个回答

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

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

    0
  • 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";

              }

            }

    这样就好了

    0
  • 劷鹿
    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>


    0