1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script language="javascript"> 7 //bg_even("表格ID属性名","奇数行背景色","偶数行背景色","鼠标经过背景色","点击后背景色"); 8 function bg_even(o,a,b,c,d){ 9 //获取对数据行的控制 10 var t=document.getElementById(o).getElementsByTagName("tr"); 11 for(var i=0;i<t.length;i++){ //遍历数据表中每一行 12 //判断数据行的奇偶位置，分别设置不同的背景色 13 t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; 14 //定义鼠标单击事件函数，设计背景色的单击开关效果 15 t[i].onclick=function(){ 16 if(this.x!="1"){//如果没有单击，则设置单击背景色 17 this.x="1"; 18 this.style.backgroundColor=d; 19 }else{//如果已经单击，则恢复原来的背景色 20 this.x="0"; 21 this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; 22 } 23 } 24 //定义鼠标经过事件函数，设计鼠标经过行的背景色效果 25 t[i].onmouseover=function(){ 26 if(this.x!="1")this.style.backgroundColor=c; 27 } 28 //定义鼠标离开事件函数，设计鼠标离开行的背景色效果 29 t[i].onmouseout=function(){ 30 if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; 31 } 32 } 33 } 34 </script> 35 <style type="text/css"> 36 table { /* 表格默认样式 */ 37 border: solid 1px #99CCFF; /* 表格外框线 */ 38 border-collapse: collapse; /* 合并单元格边框线 */ 39 } 40 th {/* 标题行样式 */ 41 background: #0000FF; /* 背景色 */ 42 color: #fff; /* 字体颜色 */ 43 } 44 </style> 45 </head> 46 47 <body> 48 <table id="grid"> 49 <caption> 50 IE浏览器发展大事记 51 </caption> 52 <tr> 53 <th>版本</th> 54 <th>发布时间</th> 55 <th>绑定系统</th> 56 </tr> 57 <tr> 58 <td>Internet Explorer 1</td> 59 <td>1995年8月</td> 60 <td>Windows 95 Plus! Pack</td> 61 </tr> 62 <tr> 63 <td>Internet Explorer 2</td> 64 <td>1995年11月</td> 65 <td>Windows和Mac</td> 66 </tr> 67 <tr> 68 <td>Internet Explorer 3</td> 69 <td>1996年8月</td> 70 <td>Windows 95 OSR2</td> 71 </tr> 72 <tr> 73 <td>Internet Explorer 4</td> 74 <td>1997年9月</td> 75 <td>Windows 98</td> 76 </tr> 77 <tr> 78 <td>Internet Explorer 5</td> 79 <td>1999年5月</td> 80 <td>Windows 98 Second Edition</td> 81 </tr> 82 <tr> 83 <td>Internet Explorer 5.5</td> 84 <td>2000年9月</td> 85 <td>Windows Millennium Edition</td> 86 </tr> 87 <tr> 88 <td>Internet Explorer 6</td> 89 <td>2001年10月</td> 90 <td>Windows XP</td> 91 </tr> 92 <tr> 93 <td>Internet Explorer 7</td> 94 <td>2006年下半年</td> 95 <td>Windows Vista</td> 96 </tr> 97 <tr> 98 <td>Internet Explorer 8</td> 99 <td>2009年3 月</td> 100 <td>Windows 7</td> 101 </tr> 102 <tr> 103 <td>Internet Explorer 9</td> 104 <td>2011年3月</td> 105 <td>Windows 7</td> 106 </tr> 107 <tr> 108 <td>Internet Explorer 10</td> 109 <td>2013年2月</td> 110 <td>Windows 8</td> 111 </tr> 112 </table> 113 <script language="javascript"> 114 bg_even("grid","#fff","#F5F5F5","#FFFFCC","#FFFF84"); 115 </script> 116 </body> 117 </html>
方法中的参数传递很有意思。