<html>
<head>
<script type='text/javascript' src='jquery-1.8.2.min.js'></script>
<script type='text/javascript'> displayToUp=function(that){
var $trEle = $(that).closest('tr');
var currentIndex = $trEle.index();
resetSequence('up',currentIndex,$trEle);
setSequenceNormal($trEle);
};
//to down
displayToDown=function(that) {
var $trEle = $(that).closest('tr');
var currentIndex = $trEle.index();
resetSequence('down',currentIndex,$trEle);
setSequenceNormal($trEle); };
//to jump
/* jump=function(that) {
if(that.keyCode == 13){
var $target = $(that);
var position = $target.val();
$target.val('');
var $trEle = $target.closest('tr');
var currentIndex = $trEle.index();
resetSequence(position,currentIndex,$trEle);
setSequenceNormal($trEle);
}
};*/
//to bottom
bottom=function(that) {
var $trEle = $(that).closest('tr');
var currentIndex = $trEle.index();
resetSequence('last',currentIndex,$trEle);
setSequenceNormal($trEle);
}; setSequenceNormal=function($trEle){ $trEle.parent().children().each(function(){
$this = $(this);
if($this.hasClass("highlight")){
$this.removeClass("highlight");
}
$this.find("td[name=mark]").html($this.index()+);
});
$trEle.addClass("highlight");
var scrollTop = /*$trEle.offset().top-*/;
$("body").scrollTop(scrollTop); /*
===============分页的写法
$trEle.parent().children().each(function(){ $this = $(this);
if($this.hasClass("highlight")){
$this.removeClass("highlight");
}
if(page.p){
var num=(page.p-1)*10;
$this.find("td[name=rank]").html($this.index()+1+num);
}else{
$this.find("td[name=rank]").html($this.index()+1);
}
});
$trEle.addClass("highlight");
var scrollTop =150;// $trEle.offset().top-
$("body").scrollTop(scrollTop);*/
},
resetSequence=function(direction,currentIndex,$targetElem){
var sequenceLength = $targetElem.parent().children().length;
if( direction <= '' || direction>sequenceLength){
alert(__("Order scope is 1-")+sequenceLength+__(", So please enter the number in this scope")); }
switch(direction){
case 'up' :
if(!currentIndex){
return false;
}
var $prev = $targetElem.prev();
$targetElem.insertBefore($prev);
break; case 'down' :
var $next = $targetElem.next();
if($next.index() == '-1'){
return false;
}
$next.insertBefore($targetElem);
break; case 'last' :
var $last = $targetElem.parent().children().last();
if($last.index() == currentIndex){
return false;
}
$targetElem.insertAfter($last);
break; default :
var $JumpPositionEle = '';
$JumpPositionEle = $targetElem.parent().children().eq(direction-);
if(direction != sequenceLength){
if(direction > currentIndex){
$JumpPositionEle = $targetElem.parent().children().eq(direction);
}
$targetElem.insertBefore($JumpPositionEle);
}else{
$targetElem.insertAfter($JumpPositionEle);
}
}
}
</script>
</head>
<body>
<table id='content' class='continer'>
<tbody>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>性别</th>
<th>联系电话</th>
<th>操作</th>
</tbody>
<tr>
<td name='mark'></td>
<td>zj1</td>
<td>zj@.com</td>
<td>boy</td>
<td>XXXXXXX</td>
<td> <p>
<button name="displayToUp" class="orangeColor"onclick='displayToUp(this)'>上移</button>
<button name="displayToDown" class="blueColor" onclick='displayToDown(this)'>下移</button>
<!-- 跳至：<input type="text" class="jump_input_box" /> -->
<button name="displayToLast" class="blueColor" onclick='bottom(this)'>底部</button>
</p>
</td>
</tr>
<tr >
<td name='mark'></td>
<td>zj2</td>
<td>zj@.com</td>
<td>boy</td>
<td>XXXXXXX</td>
<td> <p>
<button name="displayToUp" class="orangeColor"onclick='displayToUp(this)'>上移</button>
<button name="displayToDown" class="blueColor" onclick='displayToDown(this)'>下移</button>
<!-- 跳至：<input type="text" class="jump_input_box" /> -->
<button name="displayToLast" class="blueColor" onclick='bottom(this)'>底部</button>
</p>
</td>
</tr>
<tr >
<td name='mark'></td>
<td>zj3</td>
<td>zj@.com</td>
<td>boy</td>
<td>XXXXXXX</td>
<td> <p>
<button name="displayToUp" class="orangeColor"onclick='displayToUp(this)'>上移</button>
<button name="displayToDown" class="blueColor" onclick='displayToDown(this)'>下移</button>
<!-- 跳至：<input type="text" class="jump_input_box" /> -->
<button name="displayToLast" class="blueColor" onclick='bottom(this)'>底部</button>
</p>
</td>
</tr>
<tr >
<td name='mark'></td>
<td>zj4</td>
<td>zj@.com</td>
<td>boy</td>
<td>XXXXXXX</td>
<td> <p>
<button name="displayToUp" class="orangeColor"onclick='displayToUp(this)'>上移</button>
<button name="displayToDown" class="blueColor" onclick='displayToDown(this)'>下移</button>
<!-- 跳至：<input type="text" class="jump_input_box" onclick="jump(this)" /> -->
<button name="displayToLast" class="blueColor" onclick='bottom(this)'>底部</button>
</p>
</td>
</tr>
</table>
</body>
</html>
