KevinGong

?1 <! DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"
?2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
?3 < html? xmlns ="http://www.w3.org/1999/xhtml" >
?4 < head >
?5 < title > runcode </ title >
?6 < meta? http-equiv ="Content-Type" ?content ="text/html;?charset=GB2312" ? />
?7 < meta? name ="Author" ?content ="Sheneyan" ? />
?8 < script? type ="text/javascript" >
?9 var ?lastTR = null ;
10 function ?$(n) { return ?document.getElementById(n);}
11 function ?initTable(n) {
12 ?? var ?o = $(n);
13 ?? if ?( ! o) return ;
14 ?
15 ? // ?var?c=document.createElement('div');
16 ? // ?c.id='cnter';
17 ? // var?c?=?document.getElementById('tt');
18 ? // ?if?(o.nextSibling)
19 ?? // ??document.body.insertBefore(c,o.nextSibling);
20 ? // ?else
21 ? // ???document.body.appendChild(c);
22
23 ?? // var?bu=document.createElement('button');
24 ?? // bu.id="buttonUp";
25 ?? // bu.innerHTML='上'
26 ??
27 ?? // var?bu=document.getElementById('up');
28
29 ? // ?c.appendChild(bd)
30
31 ?? var ?trs = o.getElementsByTagName('tr');
32 ?? for ?( var ?i = 0 ;i < trs.length;i ++ ) {
33 ????trs[i].onmouseover = function () { this .className += '?over';}
34 ????trs[i].onmouseout = function () { this .className = this .className.replace( / \bover\b / g,'');}
35 ????trs[i].onclick = function () {
36 ?????? var ?clicked = this .className.match( / \bselected\b / );
37 ?????? if ?(lastTR)
38 ????????lastTR.className = lastTR.className.replace( / \bselected\b / g,'');
39 ?????? if ?( ! clicked)
40 ???????? this .className += '?selected';
41 ??????lastTR = this ;
42 ????}
43 ??}
44 }
45
46 ?? function ?upbutton() {
47 ???? var ?p = lastTR.parentNode;
48 ???? if ?(lastTR) {
49 ?????? var ?t = lastTR.cloneNode( true );
50 ?????? var ?pre = lastTR.rowIndex == 0 ? null :p.rows[lastTR.rowIndex - 1 ];
51 ?????? if ?(pre) {
52 ????????p.deleteRow(lastTR.rowIndex);
53 ????????lastTR = p.insertBefore(t,pre);
54 ??????}
55 ????}
56 ???? else ?
57 ??????alert('請選擇一個');
58 ???? return ? false ;
59 ??}
60
61 ???? function ?downbutton() {
62 ???? var ?p = lastTR.parentNode;
63 ???? if ?(lastTR) {
64 ?????? var ?t = lastTR.cloneNode( true );
65 ?????? var ?pos = lastTR.rowIndex == (p.rows.length - 2 ) ? null :p.rows[lastTR.rowIndex + 2 ];
66 ??????p.deleteRow(lastTR.rowIndex);
67 ?????? if ?(pos)
68 ????????lastTR = p.insertBefore(t,pos);
69 ?????? else
70 ????????lastTR = p.appendChild(t);
71 ????}
72 ???? else ?
73 ??????alert('請選擇一個');
74 ???? return ? false ;
75 ??}
76 </ script >
77 < style? type ="text/css" >
78 table#t,table#t?td {} { border-collapse : collapse ; border : solid?1px?gray ; }
79 table#t?td {} { width : 100px ; }
80 tr.over {} { background : gray ; color : blue }
81 tr.selected {} { background : blue ; color : white }
82 </ style >
83 </ head >
84 < body? onload ="initTable('t')" >
85 < tr >
86 ?? < input? name ="up" ?type ="button" ?id ="up" ?value ="向上" ?onclick ="upbutton()" ? />
87 ?? < input? name ="down" ?type ="button" ?id ="down" ?value ="向下" ?onclick ="downbutton()" ? />
88 </ tr >
89 < table? id ="t" >
90 < tr >< td > l1 </ td >< td > l1 </ td >< td > l1 </ td >< td > l1 </ td >< td > l1 </ td >< td > l1 </ td >< td > l1 </ td >< td > l1 </ td ></ tr >
91 < tr >< td > l2 </ td >< td > l2 </ td >< td > l2 </ td >< td > l2 </ td >< td > l2 </ td >< td > l2 </ td >< td > l2 </ td >< td > l2 </ td ></ tr >
92 < tr >< td > l3 </ td >< td > l3 </ td >< td > l3 </ td >< td > l3 </ td >< td > l3 </ td >< td > l3 </ td >< td > l3 </ td >< td > l3 </ td ></ tr >
93 < tr >< td > l4 </ td >< td > l4 </ td >< td > l4 </ td >< td > l4 </ td >< td > l4 </ td >< td > l4 </ td >< td > l4 </ td >< td > l4 </ td ></ tr >
94 </ table >
95 </ body >
96 </ html >