转载A JavaScript Fancier
1 <html xmlns ="http://www.w3.org/1999/xhtml" xml:lang="en" lang ="en">
2
3 <head>
4 <title></title>
5 <style type ="text/css">
6 .class1 {
7 background : #efefef ;
8 text-align : center ;
9 width : 80px ;
10 cursor : pointer;
11 }
12 .class2 {
13 background : #ffcc00 ;
14 text-align : center ;
15 width : 80px ;
16 cursor : pointer;
17 }
18 .class3 {
19 background : #ffffff ;
20 }
21 .class4 {
22 background : #ffff00 ;
23 }
24 </style>
25 <script type ="text/javascript">
26 function addEvent(elm, evType, fn, useCapture)
27 {
28 //evType ：添加控件事件[A string representing the event type being registered.]
29 //fn ：事件触发时，执行的函数[Pointer that specifies the function to call when sEvent fires]
30 //useCapture ：If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered EventListener before being dispatched to any EventTargets beneath them in the tree. Events which are bubbling upward through the tree will not trigger an EventListener designated to use capture.[注：一般为false，此例的值为false]
31 if (elm.addEventListener) //FF添加事件
32 {
33
34 elm.addEventListener(evType, fn, useCapture);
35 return true ;
36 }
37 else if(elm.attachEvent) //IE添加事件
38 {
39 var r = elm.attachEvent( "on" + evType, fn);
40 return r;
41 }
42 else
43 {
44 alert( " Handler could not be removed " );
45 }
46 }
47
48 //事件触发时，执行的函数，改变被点击td的样式
49 function changeTd(ev)
50 {
51 var ev = ev || window.event;
52 var evt = ev.srcElement || ev.target;
53 if (evt.tagName == "TD" && evt.getAttribute("t") == "yes" )
54 {
55 var sections = document.getElementsByTagName("td");
56 for ( var i = 0 ;i < sections.length;i ++ )
57 {
58 var section = sections[i];
59 if (section.getAttribute("t") == "yes")
60 {
61 section.className = (section == evt)?"class2":"class1";
62 section.nextSibling.className = (section == evt)?"class4":"class3" ;
63 }
64 }
65 }
66 }
67
68 //初始化Table的样式
69 function initTd(){
70 var sections = document.getElementsByTagName( "td" );
71 for ( var i = 0 ;i < sections.length;i ++ )
72 {
73 var section = sections[i];
74 if (section.getAttribute( "t" ) == "yes" )
75 {
76 section.className = "class1" ;
77 //nextSibling：Retrieves a reference to the next child of the parent for the object.
78 section.nextSibling.className = "class3" ;
79 addEvent(section, "click" ,changeTd);
80 }
81 }
82 }
83
84
85 </script>
86 </head >
87 <body>
88 <table cellpadding ="0" cellspacing ="0" border ="1" bordercolor ="#cccccc" style ="border-collapse:collapse" align ="center" width ="300">
89 <tr><td t="yes"> a </td><td> this is section a </td></tr>
90 <tr><td t="yes"> b </td><td> this is section b </td></tr>
91 <tr><td t="yes"> c </td><td> this is section c </td></tr>
92 <tr><td t="yes"> d </td><td> this is section d </td></tr>
93 </table>
94 <script type ="text/javascript">
95 initTd();
96 </script>
97 </body>
98 </html>
99