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 >