table行间隔色之js&css控制

来源:互联网 发布:linux安装vnc黑屏 编辑:程序博客网 时间:2024/06/15 01:14
<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>   


原创粉丝点击