当前位置: 首页 - 编程技术 - 文章正文

table行间隔色之js&css控制

xiaoqihv
<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>

文章地址:https://wenmayi.cn/post/4851.html