js 一个表单动态交互

  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>
方法中的参数传递很有意思。
点我查看效果