第一种：鼠标经过时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>
