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

麻烦大神们帮忙看一下,为什么前两行删不掉新增的就可以

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

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

  <script type="text/javascript"> 

        var num = 2;

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

        }

}        

 

     

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

     function add(){

        num++;

         //alert(num)

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

         newNode.id = "stu"+num;

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

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

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

         var aNode = document.createElement("a");

         var text = document.createTextNode("删除")

         aNode.href = "JavaScript:del("+newNode.id+")"

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

         table.appendChild(newNode);

        newNode.appendChild(tdNode);

         newNode.appendChild(tdNode1);

         newNode.appendChild(tdNodeDel);

         tdNodeDel.appendChild(aNode);

         aNode.appendChild(text);

         tdNode.innerHTML = "xh" +num

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

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

          {

              bgcChange(tr[i]);

          }

     }

   

     

     // 创建删除函数

     function del(str){

         

         //alert(str.id)

         var delRow = document.getElementById(str.id)

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

         tal.removeChild(delRow);

         

     }



  </script> 

 </head> 

 <body> 

   <table border="1" width="50%" id="table">

   <tr>

<th>学号</th>

<th>姓名</th>

<th>操作</th>

   </tr>  


   <tr id="stu1">

<td>xh001</td>

<td>王小明</td>

<td><a href="JavaScript:del(stu1)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

   </tr>


   <tr id="stu2">

<td>xh002</td>

<td>刘小芳</td>

<td><a href="JavaScript:del(stu2)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

   </tr>  


   </table>

   <input type="button" value="添加一行"  onclick = "add()"/>   <!--在添加按钮上添加点击事件  -->

 </body>

</html>


提问者:慕侠3256782 2018-05-18 15:42

个回答

  • ______苏别特
    2018-05-19 11:51:43

    你的num是从3开始的 而你前两行这两个stu小于等于2

    td>王小明</td>

    <td><a href="JavaScript:del(stu1)" >删除</a></td>   

       </tr>

       <tr id="stu2">

    <td>xh002</td>

    <td>刘小芳</td>

    <td><a href="JavaScript:del(stu2)" >删除</a></td>