第一种：鼠标经过时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 width: 200px;
37 height: 400px;
38 border: 1px solid;
39 }
40 tr td{
41 width: 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{
width: 200px;
height: 400px;
border: 1px solid;
}
/*tr.td的样式*/
tr td{
width: 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>
原文地址：https://www.cnblogs.com/yanpingping/p/10451168.html
时间： 2024-10-01 09:34:19