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

更新时间：2016年10月17日 15:24:03 作者：阿毅

这篇文章主要介绍了Jquery实现上下移动和排序,想要学习Jquery的同学可以来了解一下。具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

提出问题：

下文为大家介绍下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.Jwin.js 基于jquery的弹出层插件代码
测试页面需要引用jquery的js文件插件文件jquery.Jwin.js jquery.Jwin插件的使用参数都有详细说明
2012-05-05
jQuery学习笔记之jQuery动画效果
本次学习分为两个文件的测试，第一个是基本动画，第二个是滑动和透明动画效果，分别如下
2013-09-09
jQuery在html有效在jsp无效的原因及解决方法
最近用jQuery来写下拉框的选项值的左右移动，放到jsp里面就不能用了，经过测试终于找到了解决方法在此与大家分享下
2013-08-08
jquery validate表单验证插件
这篇文章主要为大家详细介绍了jquery validate表单验证插件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
jQuery读取XML文件的方法示例
这篇文章主要介绍了jQuery读取XML文件的方法,结合实例形式分析了jQuery基于ajax针对xml文件的读取操作相关技巧,需要的朋友可以参考下
2017-02-02
jQuery生成asp.net服务器控件的代码
jQuery生成asp.net服务器控件但不幸的是，该服务器控件依然没有起作用，还是用隐藏服务器控件来解决吧
2010-02-02
Jquery图形报表插件 jqplot简介及参数详解
jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且，jqPlot具有插件可扩展性 (Pluggability)，你可以编写自己的图表样式
2012-10-10
jQuery学习总结之元素的相对定位和选择器(持续更新)
jQuery中不仅可以使用选择器就行绝对定位，而且还可以进行相对定位，只要在$()中指定第二个参数，第二个参数就是相对的元素。第二个参数传递一个jQuery对象，则相对于这个对象为基准进行相对的选择。
2011-04-04
jQuery的remove()方法使用详解
从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。我的理解就是将元素移除了。
2015-08-08
jQuery选择器_动力节点Java学院整理
选择器是jQuery的核心，一个选择器写出来类似$('#dom-id')。下面给大家分享jQuery选择器的相关知识，感兴趣的朋友一起看看吧
2017-07-07

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具