第一种：鼠标经过时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 ????????????????????else20 ????????????????????????//当鼠标覆盖到表格偶数数行时，相关单元格背景色变为#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>设计table表格，用js设计偶数行和奇数行显示不同的颜色
原文地址：https://www.cnblogs.com/yanpingping/p/10451168.html