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

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


<!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 15:34

个回答

  • 日久弥新
    2018-06-08 09:28:22

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

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

    0
  • qq_如果你过的比我好_0
    2018-06-06 11:22:28

    <!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 00:45:37

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

    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