- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>表格间色</title>
- <script type="text/javascript">
- function tabStyle(oTable, singleColor, doubleColor, highlightColor)
- {
- var sColor = singleColor || "#FAFAFA", //单数行颜色
- dColor = doubleColor || "#E6E6E6", //双数行颜色
- hColor = highlightColor || "#FFFF00", //高亮颜色
- oldColor = '';
- for (var iB=0; iB<oTable.tBodies.length; iB++){
- var Body = oTable.tBodies[iB];
- for (var iR=0; iR<Body.rows.length; iR++){
- var Row = Body.rows[iR];
- Row.style.background = iR%2 ? dColor : sColor;
- Row.onmouseover = function () {
- oldColor = this.style.background;
- this.style.background = hColor;
- }
- Row.onmouseout = function () {
- this.style.background = oldColor;
- }
- }
- }
- }
- /* ***************************************************** */
- window.onload=function () {
- tabStyle(document.getElementById("tab1"));
- }
- </script>
- </head>
- <body>
- <table id="tab1" width="600" border="1" cellspacing="1" cellpadding="1">
- <caption>表格间色与高亮</caption>
- <thead>
- <th scope="col">姓名</th>
- <th scope="col">年龄</th>
- <th scope="col">性别</th>
- </thead>
- <tbody>
- <tr>
- <td>张三</td>
- <td>22</td>
- <td>女</td>
- </tr>
- <tr>
- <td>李四</td>
- <td>26</td>
- <td>男</td>
- </tr>
- <tr>
- <td>张三</td>
- <td>22</td>
- <td>女</td>
- </tr>
- <tr>
- <td>李四</td>
- <td>26</td>
- <td>男</td>
- </tr>
- <tr>
- <td>李四</td>
- <td>26</td>
- <td>男</td>
- </tr>
- <tr>
- <td>李四</td>
- <td>26</td>
- <td>男</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/140720149966.html
来源: http://www.codesnippet.cn/detail/140720149966.html