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 相关文章推荐
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
js调用css属性写法
Sep 21 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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 删除记录实现代码
2009/03/12 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Python深入06——python的内存管理详解
2016/12/07 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
奥巴马上海演讲稿
2014/09/10 职场文书
学校食堂标语
2014/10/06 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
单位租车协议书
2015/01/29 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript