                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为什么删除没用

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

源自：JavaScript进阶篇 9-22

关注问题我要回答

1398

操作

收起

4 回答

慕粉1474278593 回答被采纳 +2 积分
2018-12-20

<a href="javascript:removeRow(this);" onclick="removeRow(this)">删除</a>

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

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

收起回答

宝慕林6291606 提问者
2018-12-20

     
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属性，貌似在删除行的时候没用。是不能这样指定还是哪儿有问题？

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

收起回答

慕粉1474278593
2018-12-20

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 提问者

我想问的是能不能这样写： var a=document.createElement("a"); a.href="javascript:removeRow(this);"; a.innerHTML="删除"; a.onclick="removeRow(this)"; 这样写，点击删除没反应。

2018-12-20 回复有任何疑惑可以回复我~

宝慕林6291606 提问者回复宝慕林6291606 提问者

var a=document.createElement("a"); a.href="javascript:"; a.innerHTML="删除"; a.onclick="removeRow(this)";

2018-12-20 回复有任何疑惑可以回复我~

慕粉1474278593 回复宝慕林6291606 提问者

我试了一下，是onclick出问题了，可能没有这个内置属性，我用a.setAttribute("onclick","removeRow(this)")是可以成功的，你试一下

2018-12-20 回复有任何疑惑可以回复我~

查看1条回复

宝慕林6291606 提问者
2018-12-20

哦哦，再问一个问题。上述代码修改以下

c3.innerHTML="<a href="javascript:;" onclick="removeRow(this)">删除</a>" //删除成功
a.onclick="removeRow(this)" //删除失败

前面能成功我能理解，但是后面的给a标签设置onclick属性，为什么删除函数没有成功执行？

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

收起回答

慕粉1474278593

你没弄清楚js里面单引号和双引号的使用，引号里面用引号，要不然是双引号里面用单引号，要不然是单引号好里面用双引号好!你把a标签里面的双引号换成单引号!这是我目前看到的问题，也有可能还有其他问题!

2018-12-20 回复有任何疑惑可以回复我~

0/150

提交

取消

JavaScript进阶篇

参与学习 469201 人
解答问题 22584 个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

进入课程

本课相似问答

4 回答为什么删除功能没起作用？？

2 回答为什么我这个点击删除没用？

1 回答为什么删除没反应

2 回答我的删除函数没有用为什么

1 回答为什么删除只是把删除按钮删除了？？

搜索更多本课相关问答

为什么删除没用

我要回答关注问题

热搜

最近搜索清空

为什么删除没用

4 回答

本课相似问答

为什么删除没用