js实现表格变色点击行颜色改变



forword

http://blog.youkuaiyun.com/cai7095576/article/details/21808445

js实现表格变色点击行颜色改变

[html] view plain copy print ?

1. <HTML>     
2.   <HEAD>     
3.   <META   http-equiv="Content-Type"   content="text/html;   charset=utf-8">     
4.   <TITLE>table</TITLE>     
5.   <STYLE>     
6.   table {     
7.       border-top:1px   solid   black;     
8.       border-left:1px   solid   black;     
9.       cursor:default;     
10.   }     
11.   td {     
12.       border-bottom:1px   solid   black;     
13.       border-right:1px   solid   black;     
14.       height:23px;     
15.   }     
16.   </STYLE>  
17.  </HEAD>     
18.   <BODY>     
19.   <table   id="table1"   width="50%"   border="0"   cellpadding="0"   cellspacing="0">     
20.       <tr   style="background-color:#999999;   border-bottom:2px   solid   black;   height:25px"   align="center">     
21.           <td   width="25%">one</td>     
22.           <td   width="25%">two</td>     
23.           <td   width="25%">three</td>     
24.           <td   width="25%">four</td>     
25.       </tr>     
26.       <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">     
27.           <td>管理员1</td>     
28.           <td>管理员1</td>     
29.           <td>管理员1</td>     
30.           <td>管理员1</td>     
31.       </tr>     
32.       <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">     
33.           <td>管理员2</td>     
34.           <td> </td>     
35.           <td> </td>     
36.           <td> </td>     
37.       </tr>     
38.       <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">     
39.           <td> </td>     
40.           <td> </td>     
41.           <td> </td>     
42.           <td> </td>     
43.       </tr>     
44.       <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">     
45.           <td> </td>     
46.           <td> </td>     
47.           <td> </td>     
48.           <td> </td>     
49.       </tr>     
50.       <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">     
51.           <td> </td>     
52.           <td> </td>     
53.           <td> </td>     
54.           <td> </td>     
55.       </tr>     
56.       <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">     
57.           <td> </td>     
58.           <td> </td>     
59.           <td> </td>     
60.           <td> </td>     
61.       </tr>     
62.       <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">     
63.           <td> </td>     
64.           <td> </td>     
65.           <td> </td>     
66.           <td> </td>     
67.       </tr>                 
68.   </table>  
69.   </BODY>     
70.   </HTML>  

<HTML>   
  <HEAD>   
  <META   http-equiv="Content-Type"   content="text/html;   charset=utf-8">   
  <TITLE>table</TITLE>   
  <STYLE>   
  table {   
	  border-top:1px   solid   black;   
	  border-left:1px   solid   black;   
	  cursor:default;   
  }   
  td {   
	  border-bottom:1px   solid   black;   
	  border-right:1px   solid   black;   
	  height:23px;   
  }   
  </STYLE>
 </HEAD>   
  <BODY>   
  <table   id="table1"   width="50%"   border="0"   cellpadding="0"   cellspacing="0">   
      <tr   style="background-color:#999999;   border-bottom:2px   solid   black;   height:25px"   align="center">   
          <td   width="25%">one</td>   
          <td   width="25%">two</td>   
          <td   width="25%">three</td>   
          <td   width="25%">four</td>   
      </tr>   
      <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">   
          <td>管理员1</td>   
          <td>管理员1</td>   
          <td>管理员1</td>   
          <td>管理员1</td>   
      </tr>   
      <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">   
          <td>管理员2</td>   
          <td> </td>   
          <td> </td>   
          <td> </td>   
      </tr>   
      <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">   
          <td> </td>   
          <td> </td>   
          <td> </td>   
          <td> </td>   
      </tr>   
      <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">   
          <td> </td>   
          <td> </td>   
          <td> </td>   
          <td> </td>   
      </tr>   
      <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">   
          <td> </td>   
          <td> </td>   
          <td> </td>   
          <td> </td>   
      </tr>   
      <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">   
          <td> </td>   
          <td> </td>   
          <td> </td>   
          <td> </td>   
      </tr>   
      <tr   onMouseOver="over()"   onClick="change()"   onMouseOut="out()">   
          <td> </td>   
          <td> </td>   
          <td> </td>   
          <td> </td>   
      </tr>               
  </table>
  </BODY>   
  </HTML>

js代码：

[javascript] view plain copy print ?

1.    <SCRIPT language="JavaScript">     
2.    //鼠标点击选择行时候变色  
3. function change(change) {  
4.     var oObj = window.event.srcElement;  
5.     //alert(change.tagName.toLowerCase());  
6.     if(oObj.tagName.toLowerCase() == "td"){     
7.         var oTr = oObj.parentNode;     
8.         for(var i=1; i<document.all.table1.rows.length; i++)   {     
9.             document.all.table1.rows[i].style.backgroundColor   =   "";     
10.             document.all.table1.rows[i].tag = false;     
11.         }  
12.         oTr.style.backgroundColor = "#CCCCFF";     
13.         oTr.tag = true;     
14.     }  
15. }  
16.    //鼠标点击另外一行时关闭已选行变色  
17. function out() {  
18.     var oObj = event.srcElement;  
19.     if(oObj.tagName.toLowerCase() == "td"){  
20.         var oTr = oObj.parentNode;  
21.         if(!oTr.tag) oTr.style.backgroundColor = "";  
22.     }  
23. }  
24. //鼠标移动到选择行上时的行变色  
25. function over(){     
26.     var oObj = event.srcElement;  
27.     if(oObj.tagName.toLowerCase() == "td"){     
28.     var oTr = oObj.parentNode;  
29.     if(!oTr.tag) oTr.style.backgroundColor = "#E1E9FD";  
30.     }  
31. }  
32. </SCRIPT>