9-22的编程练习,无法删除,添加

来源:9-22 编程练习

菜菜粒

2016-10-20 15:34

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">
     var num=0;
      window.onload = function(){
        var y=document.getElementsByTagName(tr);           
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
      
        num= y.length-1;
        for(var i=0;i<y.length;i++)
        {
            changecolor(y[i]);
        }
        function changecolor(obj){
          obj.mouseover=function(){obj.style.backgroundColor="#f2f2f2";}
          obj.mouseout=function(){obj.style.backgroundColor="#fff";}
        }
     
    
     }
     
      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
     function addRow()
     {
         num++;
         var a = document.getElementById("table");
         var newRow=document.createElement("tr");
         newRow.innerHTML='<td>'+'xh00'+num+'</td>'+'<td>'+'第'+num+'个人'+'</td>'+'<td><a href=javascript:;  onclick="delRow(this)">删除</a></td>';
         a.appendChild(newRow);
       }
        
         
     }
            
       
     // 创建删除函数
    function del(obj){
        var x=obj.parentNode.parentNode.parentNode;
         var tr=obj.parentNode.parentNode;
         x.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:;" onclick="del(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

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

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

写回答 关注

3回答

  • 谁用了FATC
    2016-10-20 16:32:24
    已采纳

    同学,你的del上几行多了一个},可能会影响运行,你试一下删去

    菜菜粒

    爱你呦,真的是这个小细节

    2016-10-21 09:20:08

    共 1 条回复 >

  • 慕粉4228637
    2016-10-20 20:31:37

    1. del(obj)上面多了}

    2. newRow.innerHTML='<td>'+'xh00'+num+'</td>'+'<td>'+'第'+num+'个人'+'</td>'+'<td><a href=javascript:;  onclick="del(this)">删除</a></td>';  

  • 谁用了FATC
    2016-10-20 16:32:54

    就是那个del(obj)上面几行

JavaScript进阶篇

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

468781 学习 · 22507 问题

查看课程

相似问题