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的值来排序,这里有个风 ...
随机推荐
- Sql 数据引擎中删除用户名、密码信息
SQl版本:Microsoft SQL Server 2008 R2 系统:Windows Server 2008 R2 Enterprise 删除文件为:SqlStudio.bin 删除星系路径:C ...
- cocos2d-js 3.0rc0加载游戏引擎时长时间黑屏
如果是原始引擎的话是会比较大一些,但是最终发布的时候我们都建议你打包成release版,这个可以使用cocos命令 cocos compile -p web 来完成轻松打包,会在你的项目目录下创建一个 ...
- Linux命令之reset - 终端屏幕混乱的终结者
用途说明 reset命令是用来重新初始化终端的(terminal initialization).在有些情况,终端显示会混乱无比,比如不小心显示了一个二进制文件,以前我在不知道reset命令时,只好将 ...
- free pascal 错误代码表
free pascal 错误代码表 为了方便对照检查运行时错误代码,这里把所有的错误代码的含义整理出来.(最大序号为232,中间不一定连续.user.pdf P175) Run-time errors ...
- DIOCP之数据接收事件
一.不引用编码器与解码器的情况下(ECHO的DEMO) 类TIOCPtcpclient,接收服务器的数据事件:OnRecvBuffer 类TDiocpTcpServer,接收客户端数据事件:OnRec ...
- confirm确认对话框
还记得之前的javascript入门里的讲的confirm 消息对话框吗?不记得也没关系,我们先来回顾一下,然后在详细讲它. 复习: confirm 消息对话框通常用于允许用户做选择的动作,如:“你对 ...
- mybatis（一）环境的搭建
项目模型: 一.创建一个web项目ssm001 1.1准备数据 在数据创建表并添加数据 user表: dept表: /* Navicat MySQL Data Transfer Source Serv ...
- OA项目之导入
内容显示页: protected void btnIMP_Click(object sender, EventArgs e) { Response.Redire ...
- 使用 IntraWeb (45) - 活用 IntraWeb
asp.net 刚开始时, 也是拖拉控件, 但后来有了 MVC.xNext. 换个思路使用 IntraWeb 吧: 界面全部用 html+js+css 实现(有些会是用 Delphi 动态生成), 然 ...
- P1-概率论基础（Primer on Probability Theory）
2.1概率密度函数 2.1.1定义 设p(x)为随机变量x在区间[a,b]的概率密度函数,p(x)是一个非负函数,且满足 注意概率与概率密度函数的区别. 概率是在概率密度函数下对应区域的面积,如上图右 ...