随便写了一个删除函数,发现这个删除函数只能删除原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>
好吧,自己把代码改好了
<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>
我好像知道原因了,原因是onload在页面加载完后触发事件,而当时还没用js新增的<tr>行,所以这些后面新增的<tr>行就没有在onload事件的执行范围里面
知道原因了,但是还是不知道该怎么改才能实现删除功能呢?