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

求助~~总是有一些 不知名的错误 ……点删除 没反应... 错误在哪？ 主要是删除函数那里...

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

             bgC();

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

      function bgC(){

 var table = document.getElementsByTagName('table');

 var tr = table[0].getElementsByTagName('tr');

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

 tr[i].onmouseover = function(){this.style.background="#f2f2f2"}

 tr[i].onmouseout = function(){this.style.background="#fff"}

 }

 }   

var xh = 2;

function creanode(){

xh++;

var th1 = document.createElement('td')

th1.innerHTML = "xh00"+xh;

var th2 = document.createElement('td')

th2.innerHTML = "第"+xh+"位同学";

var th3 = document.createElement('td')

th3.innerHTML = "<a href='#'>删除</a>"

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

var table = document.getElementsByTagName('table');

table[0].appendChild(tr);

tr.appendChild(th1);

tr.appendChild(th2);

tr.appendChild(th3);

bgC();

}

     

 

 

     var btn = document.getElementsByTagName('input');

btn[0].onclick = creanode;

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

   

}    

     // 创建删除函数

var table = document.getElementsByTagName('table');

var aaa = table[0].getElementsByTagName("a");

for(j=0;j<aaa.length;j++){

aaa[j].onclick = function(){ 

var tr = this.parentNode.parentNode;

tr.parentNode.removeChild(tr);

}

}


  </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:;">删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

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

  </tr>  


  </table>

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

 </body>

</html>


提问者：qq_e累_0 2015-11-30 20:31

个回答

  • 一毛钱
    2015-11-30 21:07:49
    已采纳 

    <!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <script type="text/javascript">
        var xh = 2;
        window.onload = function () {
            bgC();
            var btn = document.getElementsByTagName('input');
            btn[0].onclick = creanode;
            // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；


            // 创建删除函数
            var table = document.getElementsByTagName('table');
            var aaa = table[0].getElementsByTagName("a");
            for (j = 0; j < aaa.length; j++) {
                aaa[j].onclick = function () {
                    var tr = this.parentNode.parentNode;
                    tr.parentNode.removeChild(tr);
                }
            }
        }
        function creanode() {
            xh++;
            var th1 = document.createElement('td')
            th1.innerHTML = "xh00" + xh;
            var th2 = document.createElement('td')
            th2.innerHTML = "第" + xh + "位同学";
            var th3 = document.createElement('td')
            th3.innerHTML = "<a href='#'>删除</a>"
            var tr = document.createElement('tr');
            var table = document.getElementsByTagName('table');
            table[0].appendChild(tr);
            tr.appendChild(th1);
            tr.appendChild(th2);
            tr.appendChild(th3);
            bgC();
        }
        // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        function bgC() {
            var table = document.getElementsByTagName('table');
            var tr = table[0].getElementsByTagName('tr');
            for (i = 0; i < tr.length; i++) {
                tr[i].onmouseover = function () { this.style.background = "#f2f2f2" }
                tr[i].onmouseout = function () { this.style.background = "#fff" }
            }
        }
    </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:;">删除</a></td>   <!--在删除按钮上添加点击事件  -->
        </tr>

        <tr>
            <td>xh002</td>
            <td>刘小芳</td>
            <td><a href="javascript:;">删除</a></td>   <!--在删除按钮上添加点击事件  -->
        </tr>

    </table>
    <input type="button" value="添加一行" />   <!--在添加按钮上添加点击事件  -->
</body>
</html>

    注意代码规范，你的问题主要出在代码规范问题上，你的删除操作是在onload外，这样会出现html还没有加载完成就执行，这样找不到table元素，应该放在onload里面

    0