课程

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

增加了几行之后，按下删除键，为什么全部都删除了，不是应该只删除对应的那行吗？

来源：9-22 编程练习

慕后端2576088

2019-01-18 16: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_module = document.getElementsByTagName("tr");

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

  change_state(tr_module[i]);

  }

}


      function change_state(obj){  

obj.onmouseover = function(){

obj.style.backgroundColor = "#f2f2f2";

}

obj.onmouseout = function(){

obj.style.backgroundColor = "#fff";

}

     }

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

     function add(){

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

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

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

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

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

      tdc.innerHTML="<a href='' onclick='removed(this)'>删除</a>";

      tableModule.appendChild(tr);

      tr.appendChild(tda);

      tr.appendChild(tdb);

      tr.appendChild(tdc);

     

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

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

  change_state(tr_module[i]);

  }

}  

     // 创建删除函数

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

   </tr>


   <tr>

<td>xh002</td>

<td>刘小芳</td>

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

   </tr>  


   </table>

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

 </body>

</html>


写回答 关注

2回答

  • qq_小小不是小_0
    2019-01-21 16:03:10
    已采纳

     tdc.innerHTML="<a href='' onclick='removed(this)'>删除</a>";这句话有问题

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

    0 0
  • qq_小小不是小_0
    2019-01-21 16:04:38

    上面的也不对，应该是把你的href里面加上javascript:;就OK了

    0 0

JavaScript进阶篇

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

468194 学习 · 21891 问题

查看课程

相似问题

为什么删除只是把删除按钮删除了？？

回答 1

为什么只删除了一行，不会2行都删除吗，怎么定位的

回答 1

我创建了一行后，删除的事件为什么把全部给删除了？

回答 1

为什么我的删除只是没了删除两个字，行还在

回答 3

点击删除按钮只删除删除按钮，我的删除按钮上已绑定了事件啊？

回答 2

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