Jquery实现上下移动和排序代码


Posted in Javascript onOctober 17, 2016

提出问题:

下文为大家介绍下Jquery实现上下移动和排序,感兴趣的朋友可以了解一下。

解决问题

代码实现:

<!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实现上下移动和排序代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xml转json的js代码
Aug 28 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
vue-loader教程介绍
Jun 14 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
vue实现文件上传功能
Aug 13 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
微信小程序 Page()函数详解
Oct 17 #Javascript
微信小程序 触控事件详细介绍
Oct 17 #Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 #Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 #Javascript
学习Node.js模块机制
Oct 17 #Javascript
微信小程序 火车票查询实例讲解
Oct 17 #Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 #Javascript
You might like
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
Python 数据结构之队列的实现
2017/01/22 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
护士演讲稿范文
2014/01/05 职场文书
学期评语大全
2014/04/30 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
研究生求职自荐书
2014/06/23 职场文书
督导岗位职责
2015/02/04 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
python在package下继续嵌套一个package
2022/04/14 Python