js 调整排序
<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>
js 调整排序的更多相关文章
- IOS 表视图(UITableVIew)的使用方法(7)表视图的编辑功能（拖拉调整排序位置）
除了每个单元行左边的删除和新增图标,UITableView还支持在单元行的右侧显示一个供用户拖拉调整排序位置的控件. 不过如果要显示此控件,UITableView的数据源需要实现以下的方法. -(vo ...
- 转：js,jQuery 排序的实现,网页标签排序的实现,标签排序
js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用 ...
- js拼音排序
js拼音排序 var arr =['a','c','b','b']; arr.sort( function compareFunction(p1, p2) { return p1.localeComp ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- [js] - 关于js的排序sort
js的排序sort并不能一次排序好 function solution(nums){ return nums.sort(sortNumber); } function sortNumber(a, b) ...
- JS优先队列排序。出队时，先找出优先级最高的元素，再按照先进先出出队。
JS优先队列排序.出队时,先找出优先级最高的元素,再按照先进先出出队. /* * 优先队列 * 出队时,先找出优先级最高的元素,再按照先进先出出队. * */ function Queue(){ th ...
- Js中文排序（拼音首字母）
演示地址:http://lar5.sinaapp.com/ 1.index.html <html xmlns="http://www.w3.org/1999/xhtml"&g ...
- 最大堆的插入/删除/调整/排序操作(图解+程序)（JAVA）
堆有最大堆和最小堆之分,最大堆就是每个节点的值都>=其左右孩子(如果有的话)值的完全二叉树.最小堆便是每个节点的值都<=其左右孩子值的完全二叉树. 设有n个元素的序列{k1,k2,..., ...
- js自定义排序
摘要 有个js对象数组 var ary=[{id:1,name:"b"},{id:2,name:"b"}] 需求是根据name 或者 id的值来排序,这里有个风 ...
随机推荐
- Brocade,Cisco SAN Switch命令对比
- An attempt was made to load a program with an incorrect format
用.net调用一个C++ 32位的DLL, 编译的时候选择x86, 在部署到一个64位的机器上的时候报错:"An attempt was made to load a program w ...
- xfire webServeic 例子
xfire webServeic 例子,参考网上众多例子,自己写得完成了,给大家分享 大家只要按这个目录去建文件就可以了,然后运行,至于其中原理慢慢理会吧 环境:myeclipse 10 +xfire ...
- HDU 5673 Robot ——（卡特兰数）
先推荐一个关于卡特兰数的博客:http://blog.csdn.net/hackbuteer1/article/details/7450250. 卡特兰数一个应用就是,卡特兰数的第n项表示,现在进栈和 ...
- Xcode 字体 设置-- Xcode family没有显示的字体
前往文件夹 -> /Users/user/Library/Developer/Xcode/UserData/FontAndColorThemes/ (user改为自己的用户名) -----如果 ...
- sql left join、right join、inner join
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...
- php 万能加密
function fue($hash,$times) { // Execute the encryption(s) as many times as the user wants for($i=$ti ...
- jquery实现页面动态切换的方法--toggleClass(className)
$(function() { $(".A").click(function() { $(this).toggleClass("B"); }); }); 当点击带 ...
- Origin9.1如何使用原始数据（Raw Data）绘制风向玫瑰图
核心提示:今天为大家简单介绍下如何使用原始数据绘制风向玫瑰图.本例以Origin 9.1进行演示.1.本例所用数据截图如下,列A为风向,列B为风速.2.选中两列数据,进入Plot下的Specializ ...
- 网络请求框架----HttpClient的get,post和图片上传服务器
HttpClient是Apache Jakarta Common下的子项目,用来提供高效的.最新的.功能丰富的支持HTTP协议的客户端编程工具包,并且它支持HTTP协议最新的版本和建议.HttpCli ...