实现表格的变色

表格展示

1234 435 76867 789789
1234 435 76867 789789
1234 435 76867 789789
1234 435 76867 789789

 

 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          }
13          else if(type==2){
14              obj.style.backgroundColor = "#FFFFFF"
15          } 
16      }
17      function responseClickEvent(obj){
18          if(obj.children[0].children[0].checked==true){ 
19              obj.children[0].children[0].checked = false;
20              obj.style.backgroundColor = "#FFFFFF" 
21              obj.onmouseover = function(){responseMouseEvent(obj,1);};
22              obj.onmouseout = function(){responseMouseEvent(obj,2);};
23          }
24          else{
25              obj.children[0].children[0].checked = true;
26              obj.style.backgroundColor = "#DFD027"// 
27              obj.onmouseover = null;
28              obj.onmouseout = null;
29          }
30      }
31  </script>
32  </head>
33  <body>
34      <table>
35          <tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
36              <td>
37                  <input type="checkbox" name="update_checkbox" id="update_checkbox" />
38              </td>
39              <td>1234</td>
40              <td>435</td>
41              <td>76867</td>
42              <td>789789</td>
43          </tr>
44          <tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
45              <td><input type="checkbox" name="update_checkbox" id="update_checkbox" />
46              <td>1234</td>
47              <td>435</td>
48              <td>76867</td>
49              <td>789789</td>
50          </tr>
51          <tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
52              <td><input type="checkbox" name="update_checkbox" id="update_checkbox" />
53              <td>1234</td>
54              <td>435</td>
55              <td>76867</td>
56              <td>789789</td>
57          </tr>
58          <tr onclick="responseClickEvent(this);" onmouseover="responseMouseEvent(this,1);" onmouseout="responseMouseEvent(this,2)" style="cursor:hand;background-color:#FFFFFF" >
59              <td><input type="checkbox" name="update_checkbox" id="update_checkbox" />
60              <td>1234</td>
61              <td>435</td>
62              <td>76867</td>
63              <td>789789</td>
64          </tr>
65      </table>
66  </body>
67  </html>

 

posted @ 2013-01-11 09:12  tangrongyue  Views(263)  Comments(0)  Edit  收藏  举报