增加table行(2)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> hftable </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" type="text/css" href="table.css"> 
 </head>
 <style>
 .hftable th,td{
 font:11px Arial, Helvetica, sans-serif; line-height:20px;
 }
 .hftable{border-collapse:collapse;}
 .hftable th, td{text-align:left;padding:3px 2px;border:1px solid #dddddd;}
 .hftable th{background:#328aa4;color:#fff;}
 .hftable td{background:#e5f1f4;}

 .hftable td.nomarl{background:#e5f1f4;}
 .hftable td.empty{background:#fff;}
 .hftable td.over{background:#bce774;}
 </style>
 <script language="javascript">
   window.onload = function(){
  this.init = function(){
   var oTable = document.getElementById("hftable");
   oTable.className = "hftable";

   var trArr  = oTable.getElementsByTagName("tr");
   for(var i=1;i<trArr.length;i++){
    var tdArr = trArr[i].childNodes;

    for(var j=0;j<tdArr.length;j++){

     if(i%2==0) {tdArr[j].className = "empty"}
     else{tdArr[j].className = "nomarl"};

     tdArr[j].onmouseover = function(){
      over(this); 
     };
     tdArr[j].onmouseout = function(){
      out(oTable,i);
     };
    }
   }
  };
  this.over = function(obj){
   var td = obj.parentNode.childNodes;
   for(var i=0;i<td.length;i++){
    td[i].className = "over";
   }
  };
  
  this.out  = function(obj,rowNum){
   init();
  };
  init();
 };
 </script>

 <body>
  <table cellspacing="0" cellpadding="0" id="hftable" style="width:600px;">
   <tr>
    <th>Title</th>
    <th>Title</th>
    <th>Title</th>
    <th>Title</th>
   </tr>
   <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
   </tr>   
   <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
   </tr>   
   <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
   </tr>   
   <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
   </tr> 
   <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
   </tr>
   <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
   </tr>
   <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
   </tr>
   <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
   </tr>   
  </table>
 </body>
</html>

posted on 2012-05-02 13:29  lei0515  阅读(81)  评论(0)    收藏  举报

导航