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>
