表格的行,鼠标经过时,变为另一种颜色(如:#f2f2f2),点击此行后,此行的颜色变为另一种(如:#d2e8ff,高亮度的颜色),之后,鼠标再经过这行时,还是变回#f2f2f2,后移走后还是#d2e8ff,不知道明白了没有,还有一点,我的这样的表格不止一个,所以希望写成函数.由于是内部用,ie支持便可.比较紧,大家帮帮忙!
---------------------------------------------------------------
这是你要的效果吗?
1<html>
2<head>
3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
4<meta content="Microsoft FrontPage 4.0" name="GENERATOR"/>
5<meta content="FrontPage.Editor.Document" name="ProgId"/>
6<title>highLight</title>
7<style>
8td{ font-family: Courier New; font-size: 12px; text-align: center ;height:30;word-break:break-all;}
9</style>
10</head>
11<body>
12<script defer="">
13//***by fason(2003-6-21)****//
14var i=0;
15var h=[]
16function myTestTable(oTb,oBgOver,oBgLight){
17h[i]=[null,null,oBgOver,oBgLight]
18var t=document.getElementById(oTb);
19for(m=0;m<t.rows.length;m++){
20t.rows[m].attachEvent("onmouseover",new Function("oOver("+i+")"))
21t.rows[m].attachEvent("onmouseout",new Function("oOut("+i+")"))
22t.rows[m].attachEvent("onclick",new Function("oLight("+i+")"))
23}
24i++;
25}
26
27function oOver(n){
28var e=event.srcElement;
29if(e.tagName!="TD")return;
30e=e.parentElement
31h[n][1]=e.currentStyle.backgroundColor
32e.style.backgroundColor=h[n][2]
33}
34
35function oOut(n){
36var e=event.srcElement;
37if(e.tagName!="TD")return;
38e=e.parentElement
39e.style.backgroundColor=h[n][1]
40}
41
42function oLight(n){
43var e=event.srcElement;
44if(e.tagName!="TD")return;
45e=e.parentElement
46if(h[n][0]==null)h[n][0]=e;
47h[n][0].style.backgroundColor=h[n][1]
48h[n][0].style.color=''
49h[n][0]=e;
50h[n][1]=e.style.backgroundColor=h[n][3]
51}
52myTestTable("test","#f2f2f2","#d2e8ff")
53myTestTable("myTable","#d2e8ff","#f2f2f2")
54</script>
55<table border="1" id="myTable" width="100">
56<tr>
57<td width="100%">td1</td>
58</tr>
59<tr>
60<td width="100%">td2</td>
61</tr>
62<tr>
63<td width="100%">td3</td>
64</tr>
65<tr>
66<td width="100%">td4</td>
67</tr>
68</table>
69<table border="1" id="test" width="100">
70<tr>
71<td width="100%">td1</td>
72</tr>
73<tr>
74<td width="100%">td2</td>
75</tr>
76<tr>
77<td width="100%">td3</td>
78</tr>
79<tr>
80<td width="100%">td4</td>
81</tr>
82</table>
83</body>
84</html>