js无法删除默认行,与不能删除最后一行的问题?求解答

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        td{

            text-align: center;

        }

    </style>

    <script type="text/javascript">

    window.onload=function(){

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

        var oButton = document.getElementById('button');

        var oName = document.getElementById('name');

        var oAge = document.getElementById('age');

        

        var n=oTable.tBodies[0].rows.length+1;

        // console.log(n)

        oButton.onclick=function(){

           

           var oTr=document.createElement('tr');

           var oTd=document.createElement('td');

           oTd.innerHTML=n++;

        //    console.log(oTable.tBodies[0].rows[1].cells[0])

           oTr.appendChild(oTd);

 

           var oTd=document.createElement('td');

           oTd.innerHTML=oName.value;

           oTr.appendChild(oTd);

 

           var oTd=document.createElement('td');

           oTd.innerHTML=oAge.value;

           oTr.appendChild(oTd);      

 

           var oTd=document.createElement('td');

           oTd.innerHTML='<a href="javascript:;">删除</a>';

           oTr.appendChild(oTd);  

 

           var aA=document.getElementsByTagName('a');

          

           //存在一个未解决的BUG。无法删除最后一条

           //存在一个未解决的BUG。必须要先添加一行,才能删除默认的行

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

               aA[i].onclick=function(){

                  console.log(i+"<"+aA.length);

                  oTable.tBodies[0].removeChild(this.parentNode.parentNode);

               }

           }

    


 

         oTable.tBodies[0].appendChild(oTr);

 

        };

    

 

    };

    </script>

</head>

<body>

    姓名:<input type="text" id="name">

    年龄:<input type="text" id="age">

    <input type="button" id="button" value="添加">

    <table id="table" border='1' width="500">

        <thead>

            <tr>

                <td>ID</td>

                <td>姓名</td>

                <td>年龄</td>

                <td>操作</td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>张三</td>

                <td>15</td>

                <td><a href="javascript:;">删除</a></td>

            </tr>

            <tr>

                <td>2</td>

                <td>李四</td>

                <td>12</td>

                <td><a href="javascript:;">删除</a></td>

            </tr>

            <tr>

                <td>3</td>

                <td>王五</td>

                <td>54</td>

                <td><a href="javascript:;">删除</a></td>

            </tr>

            <tr>

                <td>4</td>

                <td>赵六</td>

                <td>19</td>

                <td><a href="javascript:;">删除</a></td>

            </tr>

            <tr>

                <td>5</td>

                <td>孙七</td>

                <td>26</td>

                <td><a href="javascript:;">删除</a></td>

            </tr>

            <tr>

                <td>6</td>

                <td>周八</td>

                <td>29</td>

                <td><a href="javascript:;">删除</a></td>

            </tr>

            <tr>

                <td>7</td>

                <td>吴九</td>

                <td>25</td>

                <td><a href="javascript:;">删除</a></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

查看全部
qq_52737017
鸿兮
2020/11/24 10:20
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信

1个回复