阿宽

Nothing is more powerful than habit!
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Js实现table间隔行颜色不同

Posted on 2009-06-11 14:56  宽田  阅读(2017)  评论(0)  编辑  收藏  举报

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>精美的表格样式</title>
    <style type="text/css">

/*设置所有字体*/
body,table{
    font-size:12px;
}

table{
    table-layout:fixed;
    /*空单元格也显示*/
    empty-cells:show; 
    border-collapse: collapse;
    margin:0 auto;
}

td{
    height:20px;
}

h1,h2,h3{
    font-size:12px;
    margin:0;
    padding:0;
}

/*tile样式 调用方法Class=""*/
.title { 
    background: #FFF; 
    border: 1px solid #9DB3C5; 
    padding: 1px; 
    width:90%;
    margin:20px auto; 
}

.title h1{ 
    line-height: 31px; 
    text-align:center;  
    background: #2F589C; 
    background-repeat: repeat-x; 
    background-position: 0 0; 
    color: #FFF; 
    }
    
 /*Title中的th和td样式*/
.title th, .title td {
         border: 1px solid #CAD9EA; 
         padding: 5px; 
}


/*这个是借鉴一个论坛的样式*/
table.t1{
    border:1px solid #cad9ea;
    color:#666;
}

table.t1 th {
    background-repeat::repeat-x;
    height:30px;
}

table.t1 td,table.t1 th{
    border:1px solid #cad9ea;
    padding:0 1em 0;
}

/*间隔行的颜色*/
table.t1 tr.a1{
    background-color:#f5fafe;
}


/*样式2*/
table.t2{
    border:1px solid #9db3c5;
    color:#666;
}

table.t2 th {
    background-repeat::repeat-x;
    height:30px;
    color:#fff;
}

table.t2 td{
    border:1px dotted #cad9ea;
    padding:0 2px 0;
}

table.t2 th{
    border:1px solid #a7d1fd;
    padding:0 2px 0;
}

table.t2 tr.a1{
    background-color:#e8f3fd;
}


/*样式3*/
table.t3{
    border:1px solid #fc58a6;
    color:#720337;
}

table.t3 th{
    background-image: url(images/th_bg3.gif);
    background-repeat::repeat-x;
    height:30px;
    color:#35031b;
}

table.t3 td{
    border:1px dashed #feb8d9;
    padding:0 1.5em 0;
}

table.t3 th{
    border:1px solid #b9f9dc;
    padding:0 2px 0;
}

table.t3 tr.a1{
    background-color:#fbd8e8;
}


</style>

    <script type="text/javascript">
    function ApplyStyle(s){
        document.getElementById("mytab").className=s.innerText;
    }
    </script>

</head>
<body>
    <div class="title">
        <h1>
            大家好，CSS与表格的结合示例</h1>
        <table>
            <tr>
                <td>
                    点击链接切换样式：<a href="javascript:;" onclick="ApplyStyle(this)">t1</a> <a href="javascript:;"
                        onclick="ApplyStyle(this)">t2</a> <a href="javascript:;" onclick="ApplyStyle(this)">
                            t3</a>
                </td>
            </tr>
        </table>
    </div>
    <table id="TableNew" width="90%" border="1" class="t1">
        <thead>
            <th width="10%">
                网名</th>
            <th width="30%">
                博客</th>
            <th width="20%">
                电邮</th>
            <th width="30%">
                网络硬盘</th>
            <th width="10%">
                QQ</th>
        </thead>
        <tr>
            <td>
                wallimn</td>
            <td>
                http://blog.csdn.net/wallimn</td>
            <td>
                wallimn@tom.com</td>
            <td>
                http://wallimn.ys168.com</td>
            <td>
                54871876</td>
        </tr>
        <tr>
            <td>
                长三江</td>
            <td>
                村在</td>
            <td>
                北京天安门</td>
            <td>
                东四十条</td>
            <td>
                21345678</td>
        </tr>
        <tr>
            <td>
                长三江</td>
            <td>
                村在</td>
            <td>
                北京天安门</td>
            <td>
                东四十条</td>
            <td>
                21345678</td>
        </tr>
        <tr>
            <td>
                长三江</td>
            <td>
                村在</td>
            <td>
                北京天安门</td>
            <td>
                东四十条</td>
            <td>
                21345678</td>
        </tr>
        <tr>
            <td>
                wallimn</td>
            <td>
                http://blog.csdn.net/wallimn</td>
            <td>
                wallimn@tom.com</td>
            <td>
                http://wallimn.ys168.com</td>
            <td>
                54871876</td>
        </tr>
        <tr>
            <td>
                长三江</td>
            <td>
                村在</td>
            <td>
                北京天安门</td>
            <td>
                东四十条</td>
            <td>
                21345678</td>
        </tr>
        <tr>
            <td>
                长三江</td>
            <td>
                村在</td>
            <td>
                北京天安门</td>
            <td>
                东四十条</td>
            <td>
                21345678</td>
        </tr>
        <tr>
            <td>
                长三江</td>
            <td>
                村在</td>
            <td>
                北京天安门</td>
            <td>
                东四十条</td>
            <td>
                21345678</td>
        </tr>
    </table>
    <%--此方可以用Table行颜色的间隔    --%>

    <script type="text/javascript" language="javascript">
    for (i=0;i<TableNew.rows.length;i++) 
    {
　　    //(i%2==0)?(TableNew.rows(i).className = "a1"):(TableNew.rows(i).className = "");与下边方法相同
        if(i%2==0)
        {
            TableNew.rows(i).className = "a1";
        }
        else
        {
            TableNew.rows(i).className = "";
        }
　　}
    </script>

</body>
</html>