zoukankan html css js c++ java

设计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>

查看全文

相关阅读:
SDUT 2143 图结构练习——最短路径 SPFA模板，方便以后用。。 Anti
SDUT ACM 1002 Biorhythms 中国剩余定理 Anti
nyist OJ 119 士兵杀敌（三） RMQ问题 Anti
SDUT ACM 2157 Greatest Number Anti
SDUT ACM 2622 最短路径二维SPFA启蒙题。。 Anti
二叉索引树区间信息的维护与查询 Anti
SDUT ACM 2600 子节点计数 Anti
UVA 1428 Ping pong 二叉索引树标准用法 Anti
2010圣诞Google首页效果
 Object

原文地址：https://www.cnblogs.com/yanpingping/p/10451168.html