初始化表格(颜色)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
  <!--
    //初始化表格
    function loadtab(tabName) {
        var Ptr = document.getElementById(tabName).getElementsByTagName("tr");
        for ( var i = 0; i < Ptr.length; i++) {
            Ptr[i].className = (i % 2 > 0) ? "t1" : "t2";
        }
        for ( var i = 0; i < Ptr.length; i++) {
            Ptr[i].onmouseover = function() {
                this.tmpClass = this.className;
                this.className = "t3";
            };
            Ptr[i].onmouseout = function() {
                this.className = this.tmpClass;
            };
        }
    }
  //-->
  </script>
  <STYLE type="text/css">
        tr.t1 td {background-color: #fff;line-height: 20px;}  /* 第一行的背景色 */
        tr.t2 td {background-color: #e3e3e3;line-height: 20px;}  /* 第二行的背景色 */
        tr.t3 td {background-color: #b6dbfa;line-height: 20px;} /* 鼠标经过时的背景色 */
        body{
            font-size:12px;
        }
    </STYLE>
 </head>

 <body onload="loadtab('tab')">
  <table id="tab">
  <tr>
    <td>测试行...</td>
    <td>测试行...</td>
    <td>测试行...</td>
  </tr>
  <tr>
    <td>测试行...</td>
    <td>测试行...</td>
    <td>测试行...</td>
  </tr>
  <tr>
    <td>测试行...</td>
    <td>测试行...</td>
    <td>测试行...</td>
  </tr>
  </table>
 </body>
</html>

 

posted @ 2013-01-25 16:06  许下丶  阅读(77)  评论(0)    收藏  举报