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

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

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


正在回答

1 回答

<!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 回复 有任何疑惑可以回复我~
#1

qq_e累_0 提问者

非常感谢!
2015-12-01 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

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