1 <html>
2 <head>
3 <script type='text/javascript' src='jquery-1.8.2.min.js'></script>
4 <script type='text/javascript'>
5
6 displayToUp=function(that){
7 var $trEle = $(that).closest('tr');
8 var currentIndex = $trEle.index();
9 resetSequence('up',currentIndex,$trEle);
10 setSequenceNormal($trEle);
11 };
12 //to down
13 displayToDown=function(that) {
14 var $trEle = $(that).closest('tr');
15 var currentIndex = $trEle.index();
16 resetSequence('down',currentIndex,$trEle);
17 setSequenceNormal($trEle);
18
19 };
20 //to jump
21 /* jump=function(that) {
22 if(that.keyCode == 13){
23 var $target = $(that);
24 var position = $target.val();
25 $target.val('');
26 var $trEle = $target.closest('tr');
27 var currentIndex = $trEle.index();
28 resetSequence(position,currentIndex,$trEle);
29 setSequenceNormal($trEle);
30 }
31 };*/
32 //to bottom
33 bottom=function(that) {
34 var $trEle = $(that).closest('tr');
35 var currentIndex = $trEle.index();
36 resetSequence('last',currentIndex,$trEle);
37 setSequenceNormal($trEle);
38 };
39
40 setSequenceNormal=function($trEle){
41
42
43 $trEle.parent().children().each(function(){
44 $this = $(this);
45 if($this.hasClass("highlight")){
46 $this.removeClass("highlight");
47 }
48 $this.find("td[name=mark]").html($this.index()+1);
49 });
50 $trEle.addClass("highlight");
51 var scrollTop = /*$trEle.offset().top-*/150;
52 $("body").scrollTop(scrollTop);
53
54 /*
55 ===============分页的写法
56 $trEle.parent().children().each(function(){
57
58 $this = $(this);
59 if($this.hasClass("highlight")){
60 $this.removeClass("highlight");
61 }
62 if(page.p){
63 var num=(page.p-1)*10;
64 $this.find("td[name=rank]").html($this.index()+1+num);
65 }else{
66 $this.find("td[name=rank]").html($this.index()+1);
67 }
68 });
69 $trEle.addClass("highlight");
70 var scrollTop =150;// $trEle.offset().top-
71 $("body").scrollTop(scrollTop);*/
72 },
73 resetSequence=function(direction,currentIndex,$targetElem){
74 var sequenceLength = $targetElem.parent().children().length;
75 if( direction <= '0' || direction>sequenceLength){
76 alert(__("Order scope is 1-")+sequenceLength+__(", So please enter the number in this scope"));
77
78 }
79 switch(direction){
80 case 'up' :
81 if(!currentIndex){
82 return false;
83 }
84 var $prev = $targetElem.prev();
85 $targetElem.insertBefore($prev);
86 break;
87
88 case 'down' :
89 var $next = $targetElem.next();
90 if($next.index() == '-1'){
91 return false;
92 }
93 $next.insertBefore($targetElem);
94 break;
95
96 case 'last' :
97 var $last = $targetElem.parent().children().last();
98 if($last.index() == currentIndex){
99 return false;
100 }
101 $targetElem.insertAfter($last);
102 break;
103
104 default :
105 var $JumpPositionEle = '';
106 $JumpPositionEle = $targetElem.parent().children().eq(direction-1);
107 if(direction != sequenceLength){
108 if(direction > currentIndex){
109 $JumpPositionEle = $targetElem.parent().children().eq(direction);
110 }
111 $targetElem.insertBefore($JumpPositionEle);
112 }else{
113 $targetElem.insertAfter($JumpPositionEle);
114 }
115 }
116 }
117 </script>
118 </head>
119 <body>
120 <table id='content' class='continer'>
121 <tbody>
122 <th>编号</th>
123 <th>姓名</th>
124 <th>邮箱</th>
125 <th>性别</th>
126 <th>联系电话</th>
127 <th>操作</th>
128 </tbody>
129 <tr>
130 <td name='mark'>1</td>
131 <td>zj1</td>
132 <td>zj@123.com</td>
133 <td>boy</td>
134 <td>XXXXXXX</td>
135 <td> <p>
136 <button name="displayToUp" class="orangeColor"onclick='displayToUp(this)'>上移</button>
137 <button name="displayToDown" class="blueColor" onclick='displayToDown(this)'>下移</button>
138 <!-- 跳至：<input type="text" class="jump_input_box" /> -->
139 <button name="displayToLast" class="blueColor" onclick='bottom(this)'>底部</button>
140 </p>
141 </td>
142 </tr>
143 <tr >
144 <td name='mark'>2</td>
145 <td>zj2</td>
146 <td>zj@123.com</td>
147 <td>boy</td>
148 <td>XXXXXXX</td>
149 <td> <p>
150 <button name="displayToUp" class="orangeColor"onclick='displayToUp(this)'>上移</button>
151 <button name="displayToDown" class="blueColor" onclick='displayToDown(this)'>下移</button>
152 <!-- 跳至：<input type="text" class="jump_input_box" /> -->
153 <button name="displayToLast" class="blueColor" onclick='bottom(this)'>底部</button>
154 </p>
155 </td>
156 </tr>
157 <tr >
158 <td name='mark'>3</td>
159 <td>zj3</td>
160 <td>zj@123.com</td>
161 <td>boy</td>
162 <td>XXXXXXX</td>
163 <td> <p>
164 <button name="displayToUp" class="orangeColor"onclick='displayToUp(this)'>上移</button>
165 <button name="displayToDown" class="blueColor" onclick='displayToDown(this)'>下移</button>
166 <!-- 跳至：<input type="text" class="jump_input_box" /> -->
167 <button name="displayToLast" class="blueColor" onclick='bottom(this)'>底部</button>
168 </p>
169 </td>
170 </tr>
171 <tr >
172 <td name='mark'>4</td>
173 <td>zj4</td>
174 <td>zj@123.com</td>
175 <td>boy</td>
176 <td>XXXXXXX</td>
177 <td> <p>
178 <button name="displayToUp" class="orangeColor"onclick='displayToUp(this)'>上移</button>
179 <button name="displayToDown" class="blueColor" onclick='displayToDown(this)'>下移</button>
180 <!-- 跳至：<input type="text" class="jump_input_box" onclick="jump(this)" /> -->
181 <button name="displayToLast" class="blueColor" onclick='bottom(this)'>底部</button>
182 </p>
183 </td>
184 </tr>
185 </table>
186 </body>
187 </html>
