/*by:rush date:2011年7月4日 19:55:45*/
1.要实现的功能，如下图所示：
图1 鼠标经过项目变为蓝色
图2鼠选中变为黄色
2.实现代码
（a）主要的HTML代码有：
<tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
主要在tr标记上添加onclick事件，onmouseover事件，onmouseout事件，加上style设置默认的鼠标样式和默认的背景色.
（b）主要的javascript代码有：
1 /*
2
3 *by:rush date:2011年1月9日 00:07:52
4
5 *功能：实现表格的变色
6
7 */
8
9 function responseMouseEvent(obj,type){
10
11 if(type==1){
12
13 obj.style.backgroundColor = "#6699CC";
14
15 }else if(type==2){
16
17 obj.style.backgroundColor = "#FFFFFF";
18
19 }
20
21 }
22
23 function responseClickEvent(obj){
24
25 if(obj.children[0].children[0].checked==true){
26
27 obj.children[0].children[0].checked = false;
28
29 obj.style.backgroundColor = "#FFFFFF";
30
31 obj.onmouseover = function(){responseMouseEvent(obj,1);};
32
33 obj.onmouseout = function(){responseMouseEvent(obj,2);};
34
35 }else{
36
37 obj.children[0].children[0].checked = true;
38
39 obj.style.backgroundColor = "#DFD027";//
40
41 obj.onmouseover = null;
42
43 obj.onmouseout = null;
44
45 }
46
47 }
3.代码演示(这里就直接放源代码了~~)
1 <html>
2 <head>
3 <title>表格展示</title>
4 <script language="JavaScript">
5 /*
6 *by:rush date:2011年1月9日 00:07:52
7 *功能：实现表格的变色
8 */
9 function responseMouseEvent(obj,type){
10 if(type==1){
11 obj.style.backgroundColor = "#6699CC"
12 }else if(type==2){
13 obj.style.backgroundColor = "#FFFFFF"
14 }
15 }
16 function responseClickEvent(obj){
17 if(obj.children[0].children[0].checked==true){
18 obj.children[0].children[0].checked = false;
19 obj.style.backgroundColor = "#FFFFFF"
20 obj.onmouseover = function(){responseMouseEvent(obj,1);};
21 obj.onmouseout = function(){responseMouseEvent(obj,2);};
22 }else{
23 obj.children[0].children[0].checked = true;
24 obj.style.backgroundColor = "#DFD027"//
25 obj.onmouseover = null;
26 obj.onmouseout = null;
27 }
28 }
29 </script>
30 </head>
31 <body>
32 <table>
33 <tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
34 <td><input type="checkbox" name="update_checkbox" id="update_checkbox" />
35 </td>
36 <td>1234</td>
37 <td>435</td>
38 <td>76867</td>
39 <td>789789</td>
40 </tr>
41 <tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
42 <td><input type="checkbox" name="update_checkbox" id="update_checkbox" />
43 <td>1234</td>
44 <td>435</td>
45 <td>76867</td>
46 <td>789789</td>
47 </tr>
48 <tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
49 <td><input type="checkbox" name="update_checkbox" id="update_checkbox" />
50 <td>1234</td>
51 <td>435</td>
52 <td>76867</td>
53 <td>789789</td>
54 </tr>
55 <tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
56 <td><input type="checkbox" name="update_checkbox" id="update_checkbox" />
57 <td>1234</td>
58 <td>435</td>
59 <td>76867</td>
60 <td>789789</td>
61 </tr>
62 </table>
63 </body>
64 </html>
