js 调整排序

  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>

js 调整排序_第1张图片

你可能感兴趣的:(js)