课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

关于最后的删除

来源：9-22 编程练习

Bang丶

2015-08-18 13:05

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


为什么最后无法删除。

求正确代码

写回答 关注

2回答

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

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

    2 0

    班大人 回复Bang丶

    小意思啦

    2015-08-25 15:43:54

    共 2 条回复 >

  • 班大人
    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 0

JavaScript进阶篇

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

468061 学习 · 21891 问题

查看课程

相似问题

关于删除的疑问

回答 1

为何这个删除只能删除表格里最后的删除两个字连接？？？

回答 2

关于删除节点的问题

回答 1

关于删除函数的命名

回答 3

关于删除函数的问题

回答 4

打开慕课网App查看更多内容