为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JavaScript进阶篇

为什么原始的能删除，添加的不能删除


<!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="pink";

            }

            obj.onmouseout=function(){

                obj.style.backgroundColor="#fff";

            }

        }

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

        function addnode(){

            num++;

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

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

            tb.appendChild(tr);

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

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

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

            tr.appendChild(td1);

            tr.appendChild(td2);

            tr.appendChild(td3);

            td1.innerHTML="xh00"+num;

            td2.innerHTML="学生"+num;

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

            a.href="javascript:;";

            a.innerHTML="删除";

            td3.appendChild(a);


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

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

            {

                bgcChange(tr[i]);


            }



        }


        // 创建删除函数

        function del(obj){

            var mm = obj.parentNode.parentNode;

            mm.parentNode.removeChild(mm);

        }




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

</body>

</html>


PLA_ONE

2018-06-04

源自：JavaScript进阶篇  9-22

关注问题 我要回答
1159
操作
收起

正在回答

3 回答

日久弥新
2018-06-08

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

就这个，改过来就可以，具体为什么不清楚

0 回复 有任何疑惑可以回复我~
收起回答
#1

Fishzz

你这个是不对的，a已经是一个<a>标签了。这个语句会在<a>标签内添加新的<a>标签
2018-06-11 回复 有任何疑惑可以回复我~
#2

日久弥新 回复 Fishzz

那你是怎么改的？
2018-06-26 回复 有任何疑惑可以回复我~
#3

Fishzz 回复 日久弥新

参照别的楼层写法,你就发现区别了
2018-06-27 回复 有任何疑惑可以回复我~
qq_如果你过的比我好_0
2018-06-06

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

同样的问题，添加的点击之后还是不能删除怎么回事？

0 回复 有任何疑惑可以回复我~
收起回答
主宰灵魂
2018-06-05

因为你没给新添行的"删除"二字添加方法.修改添加函数的部分代码即可

function addnode(){

            num++;

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

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

            tb.appendChild(tr);

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

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

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

            tr.appendChild(td1);

            tr.appendChild(td2);

            tr.appendChild(td3);

            td1.innerHTML="xh00"+num;

            td2.innerHTML="学生"+num;

            

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


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

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

            {

                bgcChange(tr[i]);


            }

}

0 回复 有任何疑惑可以回复我~
收起回答
#1

夜阑卧听风吹雨y

你的del(this)哪里来的
2018-06-19 回复 有任何疑惑可以回复我~
#2

主宰灵魂 回复 夜阑卧听风吹雨y

del()是创建的删除函数 // 创建删除函数 function del(obj){ var mm = obj.parentNode.parentNode; mm.parentNode.removeChild(mm); }
2018-06-20 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468044    人
  • 解答问题       21891    个

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

进入课程

本课相似问答

3 回答添加的不能删除什么鬼？

2 回答能添加新的，能删除新的，就是不能删除旧的

1 回答为什么添加的可以删除一行，但是原先的职能删除一个单位？

2 回答关于删除按钮，为什么只能删除新增的，确不能删除原有的两条数据

1 回答用的jquery 为什么能动态添加 不能动态删除？
搜索更多本课相关问答

为什么原始的能删除，添加的不能删除

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信