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

删除函数 没办法删除 用js新增的<tr>行

随便写了一个删除函数,发现这个删除函数只能删除原HTML代码里的<tr>行,对于用js新增的<tr>行,没办法删除,不懂这是为什么,请教~


<script type="text/javascript"> 

// 创建删除函数

window.onload = function(){

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

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

        a[i].onclick = function(){

            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

        }

    }

}

// 创建添加函数  

function add_1(){

    var xm=prompt("请输入学号");

    var xn=prompt("请输入姓名"); 

    if(xm!=null&&xm!=""&&xn!=null&&xn!=""){

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

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

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

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

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

        td1.innerHTML=xm;

        td2.innerHTML=xn;

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

        tr.appendChild(td1);

        tr.appendChild(td2);

        tr.appendChild(td3);

        m.appendChild(tr);

    }

    else{alert("姓名学号不可以为空!");}

}

</script> 


正在回答

2 回答

好吧,自己把代码改好了


<script type="text/javascript"> 

// 创建删除函数

window.onload = function(){

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

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

        a[i].onclick = function(){

            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

        }

    }  

}

// 创建添加函数  

function add_1(){

    var xm=prompt("请输入学号");

    var xn=prompt("请输入姓名"); 

    if(xm!=null&&xm!=""&&xn!=null&&xn!=""){

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

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

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

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

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

        td1.innerHTML=xm;

        td2.innerHTML=xn;

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

        tr.appendChild(td1);

        tr.appendChild(td2);

        tr.appendChild(td3);

        m.appendChild(tr);

        tr.onclick = function(){

            this.parentNode.removeChild(this);

        }

    }

    else{alert("姓名学号不可以为空!");}

}

</script> 


0 回复 有任何疑惑可以回复我~

我好像知道原因了,原因是onload在页面加载完后触发事件,而当时还没用js新增的<tr>行,所以这些后面新增的<tr>行就没有在onload事件的执行范围里面

知道原因了,但是还是不知道该怎么改才能实现删除功能呢?

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

删除函数 没办法删除 用js新增的<tr>行

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