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

关于最后的删除

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

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

              bgcChange(tr[i]);

          }

     }

     function bgcChange(tri)

          {

              tri.onmouseover=function(){

                  tri.style.backgroundColor="#f2f2f2";

              }

              tri.onmouseout= function () {

                  tri.style.backgroundColor="#fff";

              }


          }

     

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

      function addROW(){

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

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

          if(xh!=null&&xh!=""&&xm!=null&&xm!="")

          {

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

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

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

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

          td1.innerHTML=xh;

          td2.innerHTML=xm;

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

         tr.appendChild(td1);

         tr.appendChild(td2);

         tr.appendChild(td3);

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

          var last=addrow.appendChild(tr);

          //新添加的tr也能执行此函数

             bgcChange(last);

          }

          else alert("姓名学号不可以为空！");


      }

     

   

     

     // 创建删除函数

     function deleteROW(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:deleteROW(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:deleteROW(this);" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

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

 </body>

</html>


为什么最后无法删除。

求正确代码

提问者：Bang丶 2015-08-18 13:05

个回答

  • 班大人
    2015-08-24 16:56:42
    已采纳

    <a href="javascript:deleteROW(this);" >  我第一次见有这样写 JavaScript：deleteROW（this）

    0
  • 班大人
    2015-08-24 16:55:55

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

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

                  bgcChange(tr[i]);

              }

         }

         function bgcChange(tri)

              {

                  tri.onmouseover=function(){

                      tri.style.backgroundColor="#f2f2f2";

                  }

                  tri.onmouseout= function () {

                      tri.style.backgroundColor="#fff";

                  }


              }

         

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

          function addROW(){

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

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

              if(xh!=null&&xh!=""&&xm!=null&&xm!="")

              {

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

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

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

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

              td1.innerHTML=xh;

              td2.innerHTML=xm;

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

             tr.appendChild(td1);

             tr.appendChild(td2);

             tr.appendChild(td3);

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

              var last=addrow.appendChild(tr);

              //新添加的tr也能执行此函数

                 bgcChange(last);

              }

              else alert("姓名学号不可以为空！");


          }

         

       

         

         // 创建删除函数

         function td3(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="td3(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->

      </tr>


      <tr>

    <td>xh002</td>

    <td>刘小芳</td>

    <td><a href="javascript:;" onclick="td3(this);">删除</a></td>   <!--在删除按钮上添加点击事件  -->

      </tr>  


      </table>

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

     </body>

    </html>


    0