table行間隔色之js&css控制

來源:互聯網
上載者:User
<table id="Tables" class="list_content">    <tbody>    <th><td>名稱</td></th>    <tr><td>Java</td></tr>    <tr><td>Python</td></tr>    <tr><td>C++</td></tr>    <tr><td>C</td></tr>    <tr><td>C#</td></tr>    </tbody></table>

<style type="text/css">        /* 表頭 */        table.list_content th{background-color: #CFE2F8;height:24px;border:solid 0px #BDCBE8;border-right:solid 1px #BDCBE8;border-bottom:solid 1px #BDCBE8;}        /* 表格內表格線顏色 */        table.list_content tr{height:24px;}        table.list_content td{border:solid 0px #BDCBE8;border-right:solid 1px #BDCBE8;padding: 2px 4px;}        .oddrow{ background:#E8EEF7;}           .evenrow{background:#fff;}    </style>

<script type="text/javascript">        onload = function() {            var table1 = document.getElementById("Table1");            var rows = table1.getElementsByTagName("tr");            for (var i = 1; i < rows.length; i++) {                rows[i].index = i;                rows[i].className = (i % 2 == 0) ? "oddrow" : "evenrow";            }        }; </script>   
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.