您的位置：首页 > Web前端 > JavaScript

JS之动态表格

2016-01-15 23:46 561 查看

<!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 tr=document.getElementsByTagName("tr");  
          for(var i= 0;i<tr.length;i++)  
          {  
              bgcChange(tr[i]);  
          }  
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。  
      }           
      function bgcChange(a)  
        {  
          a.onmouseover=function(){  
            a.style.backgroundColor="#f2f2f2";  
        }  
          a.onmouseout=function(){  
            a.style.backgroundColor="#fff";  
        }  
 }  
  
  
  
  
         function rem(rec)  
     {  
         var x = rec.parentNode.parentNode;  
         var y = document.getElementById("table").lastChild;  
         //document.write(y.lastChild.nodename);  
         y.removeChild(x);  
     }  
       
       
      var num = document.getElementsByTagName("tr").length;  
      document.write(num);  
      function add(){  
      var input = document.getElementsByTagName("input")[0];   
      var tab = document.getElementById("table").lastChild;  
      var tr = document.createElement("tr");  
      var td1 = document.createElement("td");  
      var td2 = document.createElement("td");  
      var td3 = document.createElement("td");  
            num++;  
            td1.innerHTML = "xh00"+ num;  
            td2.innerHTML = "第"+num+"个同学";  
            td3.innerHTML = '<a href="javascript:function();" onclick = "rem(this)">删除</a>' ;  
            tr.appendChild(td1);  
            tr.appendChild(td2);  
            tr.appendChild(td3);   
            tab.appendChild(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 = "rem(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->  
       </tr>  
  
       <tr>  
        <td>xh002</td>  
        <td>刘小芳</td>  
        <td><a href="javascript:;" onclick = "rem(this)">删除</a></td>   <!--在删除按钮上添加点击事件  --> 
       </tr>    
  
       </table>  
       <input type="button" value="添加一行" onclick="add()"/>   <!--在添加按钮上添加点击事件  -->  
 </body>  
</html>

今天搞这个东西搞了一整个晚上！！！！！！！！！！！！！！！学的东西明天整理，晚安！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html

相关文章推荐

新的分享

章节导航