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的值来排序,这里有个风 ...
随机推荐
- TIJ读书笔记04-方法重载
TIJ读书笔记04-方法重载 为什么会有方法重载 方法签名 如何区分重载 关于基本类型的重载 为什么会有方法重载 OOP的编程方式就是让程序的逻辑更加接近现实世界的逻辑. 而在现实世界中,自然语言本身 ...
- Jmeter外部函数引用
Jmeter外部函数引用 1.Beanshell引用Jmeter变量 添加用户自定义变量,输入变量名称和变量值,添加Debug sampler,用于输出初始变量值.
- BootLoader 详解（1）
1. Boot Loader的概念 BootLoader就是在操作系统内核运行前之前运行的一段小程序.通过这段小程序,可以初始化硬件设备.建立内存空间映射图,从而将系统的软硬件带到一个合适的状态,以便 ...
- SO单号中某两项没进FP
某张SO共60项,有两项没有进FP系统,550 560两项VC物料没有进FP 1.检查in_sales_order发现是有60行数据 2.在INODS时执行FP_SO呢个存储过程会将in_sales_ ...
- protobuff 配合 libevent 在Linux 和windows 下的使用
protobuff 配合 libevent 在Linux 和windows 下的使用待补全. libprotobuf.lib libproto-lite.lib libprotoc.lib
- solr入门命令
#####################shell命令############################# 导入文档: sh bin/post -c gettingstarted docs/i ...
- Python验证码识别处理实例(转载)
版权声明:本文为博主林炳文Evankaka原创文章,转载请注明出处http://blog.csdn.net/evankaka 一.准备工作与代码实例 1.PIL.pytesser.tesseract ...
- PLSQL往表中插入中文乱码解决办法
1.查看服务器端编码:select userenv('language') from dual; 2.查看第一行中PARAMETER项中为NLS_LANGUAGE 对应的VALUE项中是否和第一步得到 ...
- C/C++语言的一些精简归纳
前言:本想直接写个关于OC语言,但觉得还是要说下C先. 先语言特性 C是面向过程的,没有类和对象概念,也就没有什么封装(这个?).继承.多态等特性. 而且是是中级语言,其编译过程包括:预编译(incl ...
- PHP 输出缓冲控制(Output Control) 学习
php 缓冲简介 其实我对php ob 系列印象还是很模糊,具体怎么玩的,还不是很了解,平时curd,确实对这些内容没有深入.作为phper 甚是惭愧.网上搜了一通,互相copy,代码运行不能出现作者 ...