<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-2.0.0.js"></script>
<!--
<script type="text/javascript" src="resource_demo.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.js"></script>
<script type="text/javascript" src="ztree/css/zTreeStyle/zTreeStyle.css"></script>
<script type="text/javascript"src="jBox/jBox/jquery-1.4.2.min.js"></script>
<script type="text/javascript"src="jBox/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript"src="jBox/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript"src="jquery.cookie.js"></script>
<link href="jBox/jBox/Skins/Blue/jbox.css" rel="stylesheet" type="text/css" /> -->
<body>
<div id="checkAndInverCheck">
<table style="align:center">
<tr>
<td><input type="checkbox" value="蕙兰">蕙兰</td>
<td><input type="text" name="orderNum" size="3" value="1"/></td>
<td><input type="button" name="upMove" value="上移"/></td>
<td><input type="button" name="downMove" value="下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value="建兰">建兰</td>
<td><input type="text" name="orderNum" size="3" value="2"/></td>
<td><input type="button" name="upMove" value="上移"/></td>
<td><input type="button" name="downMove" value="下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value="寒兰">寒兰</td>
<td><input type="text" name="orderNum" size="3" value="3"/></td>
<td><input type="button" name="upMove" value="上移"/></td>
<td><input type="button" name="downMove" value="下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value="墨兰">墨兰</td>
<td><input type="text" name="orderNum" size="3" value="4"/></td>
<td><input type="button" name="upMove" value="上移"/></td>
<td><input type="button" name="downMove" value="下移"/></td>
</tr>
</div>
<script type="text/javascript">
//上移
$("input[name='upMove']").bind("click",function(){
  var $this = $(this);
  var curTr = $this.parents("tr");
  var prevTr = $this.parents("tr").prev();
  if(prevTr.length == 0){
    alert("第一行,想移啥？");
    return;
  }else{
    prevTr.before(curTr);
    sortNumber();//重新排序
  }
});
//下移
$("input[name='downMove']").bind("click",function(){
  
  var $this = $(this);
  var curTr = $this.parents("tr");
  var nextTr = $this.parents("tr").next();
  if(nextTr.length == 0){
    alert("最后一行,想移啥？");
    return;
  }else{
    nextTr.after(curTr);
    sortNumber();//重新排序
  }
});
//排序
$("input[name='orderNum']").bind("change",function(){
  var $this = $(this);
  //获得当前行
  var curTr = $this.parents("tr");
  var curOrderNum = $this.val();
  //当前行同级的所有行
  var siblingsTrs = curTr.siblings();
  if(siblingsTrs.length >0){
    for(var i in siblingsTrs){
      var otherOrderNum = $(siblingsTrs[i]).children().find("input[name='orderNum']").val();
      if(parseInt(curOrderNum) <= parseInt(otherOrderNum)){
        $(siblingsTrs[i]).before(curTr);
        sortNumber();//重新排序
        break;
      }
    }
  } 
});
function sortNumber(){
  var allInput = $("#checkAndInverCheck").find("input[name='orderNum']");
  alert(123);
  if(allInput.length != 0){
    for(var i=0;i<allInput.length;i++){
      var tempInput = allInput[i];
      tempInput.value = i + 1;
    }
  }
}
</script>
</body>
</html>

Jquery实现上下移动和排序代码的更多相关文章

  1. 雷林鹏分享：jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

  2. 雷林鹏分享：jQuery EasyUI 数据网格 - 自定义排序

    jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...

  3. jQuery基于ajax实现星星评论代码

    本文实例讲述了jQuery基于ajax实现星星评论代码.分享给大家供大家参考.具体如下: 这里使用jquery模仿点评网的星星评论功能,Ajax评论模块,鼠标点击星星即可评价,下边是分数,可以点击后给 ...

  4. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  5. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  6. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  7. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  8. 编程算法 - 切割排序 代码(C)

    切割排序 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 排序切割, 把一个数组分为, 大于k\小于k\等于k的三个部分. 能够使用高速排序的Parti ...

  9. jquery实现多条件筛选特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下:jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点. ...

随机推荐

  1. NEXYS 3开发板练手--USB UART(三)

    接着上一篇,今天我们来建立一个能用于实际工程中的DEMO. 首先,为了使我们的发送机不像上一个DEMO一样无节制的循环发送,我们需要修改代码,增加使发送机停止发送的控制部分,修改后的代码如下: `ti ...

  2. coreos 创建使用密钥登陆的ubuntu 基础镜像

    下载官方镜像 core@localhost ~ $ docker pull ubuntu:14.04 #假设官方下载较慢,可到www.dockerpool.com下载标准镜像 core@localho ...

  3. [LeetCode][Java] Search Insert Position

    题目: Given a sorted array and a target value, return the index if the target is found. If not, return ...

  4. 每日英语：Hong Kong Lifestyle Strains City's Resources

    Hong Kong's rapacious consumption and waste production is straining its natural resources and could ...

  5. LeetCode: Permutations 解题报告

    Permutations Given a collection of numbers, return all possible permutations. For example,[1,2,3] ha ...

  6. Zabbix添加自定义监控项（一）

    前言:由于Zabbix提供的项目和模板有限,有时我们需要自定义监控项,下面以监控磁盘I/O使用率为例,创建自动发现规则,并配置图形. (1)Zabbix_agentd端自动发现脚本,zabbix要求返 ...

  7. strcat

    将两个char类型链接. char d[20]="GoldenGlobal"; char *s="View"; strcat(d,s); 结果放在d中 prin ...

  8. MySQL Daemon failed to start

    http://blog.163.com/cmdbat@126/blog/static/17029212320122804743900/

  9. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  10. 【C#/WPF】用Thumb做可拖拽的UI控件

    需求:简单的可拖拽的图片 使用System.Windows.Controls.Primitives.Thumb类 前台: <Canvas x:Name="g"> < ...