为什么删除没用

源自：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(){
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         var trlist=document.getElementsByTagName("tr");
         //document.write(trlist.length);
         for(i=0;i<trlist.length;i++){
            trlist[i].onmouseover=function(){
                this.style.backgroundColor="#f2f2f2";
            }
            trlist[i].onmouseout=function(){
                this.removeAttribute("style");
            }
         }
     }
     
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function addRow(){
        var newrow=document.createElement("tr");
        var c1=document.createElement("td");
        var text1=document.createTextNode("xh00x");
        var c2=document.createElement("td");
        var c3=document.createElement("td");
        var a=document.createElement("a");
        document.getElementById("table").appendChild(newrow);
        newrow.appendChild(c1);
        newrow.appendChild(c2);
        newrow.appendChild(c3);
        c1.appendChild(text1);
        c3.appendChild(a);
        c2.innerHTML="小明";
        a.href="javascript:removeRow(this);";
        a.innerHTML="删除";
     }    
        
     // 创建删除函数
     function removeRow(obj){
        var tr=obj.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:removeRow(this);" onclick="removeRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

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

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

a标签中<a href="javascript:;"onclick="removeRow(this)">用onclick调用删除函数是可以删除行的。

<a href="javascript:removeRow(this);" >这种方式为什么不行？

提问者：宝慕林6291606 2018-12-20 13:47

个回答

慕粉1474278593

2018-12-20 15:30:10

已采纳

<a href="javascript:removeRow(this);" onclick="removeRow(this)">删除</a>
href里面不用写东西，多此一举；需要添加额外事件触发，多个removeRow,它会执行第一个；但是href是页面跳转用的，它的this值是window，不是当前元素，就导致找不到需要删除的内容。

2

宝慕林6291606: 2018-12-20 16:13:29

     
function addRow(){
        
var newrow=document.createElement(
"tr"
);
        
var c1=document.createElement(
"td"
);
        
var text1=document.createTextNode(
"xh00x"
);
        
var c2=document.createElement(
"td"
);
        
var c3=document.createElement(
"td"
);
        
var a=document.createElement(
"a"
);
        
document.getElementById(
"table"
).appendChild(newrow);
        
newrow.appendChild(c1);
        
newrow.appendChild(c2);
        
newrow.appendChild(c3);
        
c1.appendChild(text1);
        
c3.appendChild(a);
        
c2.innerHTML=
"小明"
;
        
a.href=
"javascript:;"
;
a.onclick="removeRow(this)";
        
a.innerHTML=
"删除"
; 
}  
我想问的是a标签添加的onclick属性，貌似在删除行的时候没用。是不能这样指定还是哪儿有问题？

慕粉1474278593

2018-12-20 16:06:24

<script type="text/javascript">
window.onload = function(){
var tr=document.getElementsByTagName("tr");
for(var i= 0;i<tr.length;i++){
bgcChange(tr[i]);
}
}
function bgcChange(obj)
{
obj.onmouseover=function(){
obj.style.backgroundColor="yellow";
}
obj.onmouseout=function(){
obj.style.backgroundColor="red";
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
var num = 2;
function addRow(){
num++;
var table=document.getElementById("table");
var tr=document.createElement("tr");
var xh=document.createElement("td");
var xm=document.createElement("td");
var del=document.createElement("td");
xh.innerHTML = "xh"+num;
xm.innerHTML = "第"+num+"个学生";
del.innerHTML = "<a href='javascript:;' onclick='removeRow(this)' >删除</a>";
table.appendChild(tr);
tr.appendChild(xh);
tr.appendChild(xm);
tr.appendChild(del);
bgcChange(tr);
}
// 创建删除函数
function removeRow(obj){
var tr=obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
</script>
这是我参考别人代码改写的，你研究一下

0
宝慕林6291606

2018-12-20 15:50:01

哦哦，再问一个问题。上述代码修改以下
```
c3.innerHTML="<a href="javascript:;" onclick="removeRow(this)">删除</a>" //删除成功
a.onclick="removeRow(this)" //删除失败
```
前面能成功我能理解，但是后面的给a标签设置onclick属性，为什么删除函数没有成功执行？

0