添加的不能删除什么鬼?

来源:9-22 编程练习

qq_如果你过的比我好_0

2018-06-06 11:25

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

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

//tr_arr[i].onmouseover=function(){this.style.backgroundColor='red';}

//tr_arr[i].onmouseout=function(){this.style.backgroundColor='white';}

tr_arr[i].setAttribute("onmouseover","this.style.backgroundColor='red'");

tr_arr[i].setAttribute("onmouseout","this.style.backgroundColor='white'");

}

}

     

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

  function appendNoed(){

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

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

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

for(i=1;i<=3;i++){

//alert("循环"+i+"次");

trNode.appendChild(document.createElement("td"));

if(i==3){

trNode.lastChild.appendChild(appA);

var a= trNode.lastChild.firstChild;

a.innerHTML="删除";

a.onClick="del(this)";

a.href="javascript:;";

}

}

tabNode.appendChild(trNode);

    }

     

     // 创建删除函数

function del(x){

alert(x.id);

      var trNode = x.parentNode.parentNode;

      var tabNode = x.parentNode.parentNode.parentNode;

  tabNode.removeChild(trNode);

    }

  </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="appendNoed()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>


写回答 关注

3回答

  • Fishzz
    2018-06-11 15:04:35

    你的<a>标签添加onclick属性未成功,建议如下:

    原代码:

    a.onclick="del(this)";

    改为:

    a.setAttribute("onclick","del(this);");


  • 有一个昵称
    2018-06-11 12:04:24

    同上一个   新加的tr是需要加到tbody 中的

  • 日久弥新
    2018-06-08 09:23:18

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

    你需要吧a.innerHTML里面的这样写

JavaScript进阶篇

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

468194 学习 · 21891 问题

查看课程

相似问题