JavaScript小例子2

 

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
  <script type="text/javascript"> 
  
     window.onload = function(){
        // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        var trLine = document.getElementsByTagName("tr");
        for(var i= 0;i<trLine.length;i++)
        {
            bgcChange(trLine[i]);
        }     
     }
     

     function bgcChange(obj){
        obj.onmouseover = function(){
            obj.style.backgroundColor = "#8aaed7";
        }
        obj.onmouseout=function(){
            obj.style.backgroundColor="#fff";
        }
     } 

        
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     originSerial = 2;
     function addNodes(){
         originSerial++;
         var new_tr = document.createElement("tr");
         var td_serial = document.createElement("td");
         var td_name = document.createElement("td");
         var td_operation = document.createElement("td");
        
         td_serial.innerHTML = "xh00"+originSerial;
         td_name.innerHTML="小"+originSerial;
         td_operation.innerHTML="<a href='javascript:;'  onclick='dele(this)' >删除</a>";

         var tab = document.getElementById("table");
         tab.appendChild(new_tr);
         new_tr.appendChild(td_serial);
         new_tr.appendChild(td_name);
         new_tr.appendChild(td_operation);

         var tr = document.getElementsByTagName("tr");//这段要是不添加的话 新加行就会没有背景色
          for(var i= 0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
     }
    function clickAdd(){
        var btnAdds = document.getElementsByTagName("input");
        for (var i = 0; i < btnAdds.length; i++) {  
            btnAdds[i].onclick=function(){
                return addNodes();
            }
        }
    }    
        
    // 创建删除函数
    //  function dele(obj){
    //     var de_tr = obj.parentNode.parentNode;
    //     de_tr.parentNode.removeChild(de_tr);  
    //  }



    // 选择以上代码请注销以下代码，并且在底下HTML中添加3个onclick方法
    // 选择以下请注销以上dele()函数 
    // --------我想把onclick事件写在JS中，但是发现不能动态获取当前所有链接，所以在点>=第3行没有反应，点击前两个可以删除
     

     function getObj(){
        var links = document.getElementsByTagName("a");
        for (var i=0; i < links.length; i++) {
            links[i].onclick = function() {
                 return JSdel(this);
            }
        }
     }
     function JSdel(delObj){
        var link = delObj;
        var get_tr = link.parentNode.parentNode;//td tr // (get_tr.parentNode.nodeName)//tbody     
        get_tr.parentNode.removeChild(get_tr);  
        return false;
     }

     function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
            oldonload();
            func();
            }
        }
    }
     function deleEvent(){
        getObj();
     }
     addLoadEvent(deleEvent); 
     addLoadEvent(clickAdd); 
    
  </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:;"  >删除</a></td>   <!-- 在删除按钮上添加点击事件 onclick="dele(this)" -->
       </tr>

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

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

 

posted @ 2017-12-12 14:55  marvelousone  阅读(190)  评论(0)    收藏  举报