遇到瓶颈了,删除任意删除实在是搞不来,求大神帮我看看吧

来源:9-22 编程练习

小平头哥

2018-09-20 23:25

<!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(){ changeColor();  }


    function changeColor(){

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

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

            trc[i].style.backgroundColor="#fff";

            trc[i].setAttribute("onmouseover","this.style.backgroundColor='#f2f2f2'"); 

            trc[i].setAttribute("onmouseout","this.style.backgroundColor='#fff'"); 

            }

     }


    function add() {

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

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

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

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

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

            var co = document.createTextNode("");

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


            a.innerHTML = "删除";

            a.href ="javascript:delrow()";

            c.appendChild(co);

            d.appendChild(co);

            f.appendChild(a); 


            newLow.appendChild(c);

            newLow.appendChild(d);

            newLow.appendChild(f);

            tb.appendChild(newLow);

            changeColor();

    }  


    function delrow(){

            var tbody = document.getElementById('table');  

            tbody.removeChild(tbody.lastChild);


    }//向这边,我很想知道点击这一行的删除,能否准确定位到当前的chilidNodes【i】的方法。有没有类似指针的东西

//好确定此时的位置

     



  </script> 

 </head> 

 <body> 

       <table border="1" width="50%" id="table">

       <tr onclick="on()">

        <th>学号</th>

        <th>姓名</th>

        <th>操作</th>

       </tr>  


       <tr>

        <td>xh001</td>

        <td>王小明</td>

        <td><a href="javascript:delrow();" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

       </tr>


       <tr>

        <td>xh002</td>

        <td>刘小芳</td>

        <td><a href="javascript:delrow();" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

       </tr> 


       </table>

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

 </body>

</html>


写回答 关注

1回答

  • 小平头哥
    2018-09-20 23:26:42

    不太赞同参考代码的观点在一个tr下增加好多tr

JavaScript进阶篇

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

468061 学习 · 21891 问题

查看课程

相似问题