设计table表格，用js设计偶数行和奇数行显示不同的颜色

第一种：鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             function changeOver(elementId){
 8                 //声明指定相关表元素
 9                 var table1 = document.getElementById("table1").children[0];
10                 //for循环语句
11                 for(var i=0;i<table1.children.length;i++){
12                     //if判断语句
13                     if(table1.children[i]==elementId){
14                     //奇数行
15                     if(i%2==1)
16                         //当鼠标覆盖到表格奇数行时，相关单元格背景色变为#CCCCCC色
17                         elementId.style.background="red";
18                     //偶数行
19                     else
20                         //当鼠标覆盖到表格偶数数行时，相关单元格背景色变为#F2F2F2色
21                         elementId.style.background="green";
22                     }
23                 }
24             }
25                 //当鼠标离开相关单元格时所触发的事件
26             function changeOut(elementId){
27                 //当鼠标离开相关表格相关行时，其相关行背景色变为#FFFFFF色
28                 elementId.style.background="#FFFFFF";
29             }
30     
31         
32         </script>
33         <style type="text/css">
34             /*表格的样式*/
35             table{
36                  200px;
37                 height: 400px;
38                 border: 1px solid;
39             }
40             tr td{
41                  100px;
42                 height: 50px;
43                 border: 1px solid;
44             }
45         </style>
46     </head>
47     <body>
48         <!--onmouseover鼠标经过时触发的函数，onmouseout鼠标离开时触发的函数-->
49         <table id="table1" >
50             <tr  onmouseover="changeOver(this)" onmouseout="changeOut(this)">
51                 <td >1</td>
52             </tr>
53             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
54                 <td>2</td>
55             </tr>
56             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
57                 <td>3</td>
58             </tr>
59             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
60                 <td>4</td>
61             </tr>
62             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
63                 <td>5</td>
64             </tr>
65             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
66                 <td>6</td>
67             </tr>
68             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
69                 <td>7</td>
70             </tr>
71             <tr onmouseover="changeOver(this)" onmouseout="changeOut(this)">
72                 <td>8</td>
73             </tr>
74             
75         </table>
76     </body>
77 </html>

第二种：直接用css发生改变，使用了伪类选择器nth-child

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*奇数改变的颜色*/
            tr:nth-child(odd){background-color:#FFE4C4;}
            /*偶数改变的颜色*/
            tr:nth-child(even){background-color:#F0F0F0;}
            /*table样式*/
            table{
                 200px;
                height: 400px;
                border: 1px solid;
            }
            /*tr.td的样式*/
            tr td{
                 100px;
                height: 50px;
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <!--设计的一个简单表格-->
        <table id="table1" >
            <tr>
                <td >1</td>
            </tr>
            <tr>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
            </tr>
            <tr >
                <td>6</td>
            </tr>
            <tr >
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
            </tr>
            
        </table>
    </body>
</html>

相关阅读:
nyoj--325--zb的生日（简单dp）
nyoj--124--中位数（水题）
nyoj--90--整数划分(母函数)
nyoj--18--The Triangle(dp水题)
CodeForces ---596B--Wilbur and Array(贪心模拟)
nyoj--1023--还是回文(动态规划)
poj--3984--迷宫问题（bfs+路径记录）
Netty(4)Stream by codec(粘包与拆包)
Netty(1-1)Discard
Netty：option和childOption参数设置说明
原文地址：https://www.cnblogs.com/yanpingping/p/10451168.html