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>
时间： 2024-10-25 09:44:47

Jquery实现上下移动排序---兰的相关文章

jquery模拟字母顺序排序定位城市列表方法(bug改进)

jquery模拟字母顺序排序定位城市列表方法 下载地址http://www.lanrenzhijia.com/jquery/3155.html bug 重庆--长沙不能正常排序. 原因是derail有可能会放回两个字符的数组.需要做判断 改进 //改动 特殊字符-->可能还有问题--返回的是数组有两个字符 var   derail =makePy(SortList.eq(i).find('.num_name').text().charAt(0)) if(derail.length==2&&a

使用jQuery UI 实现表格排序

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格排序</title> <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"></head> <body><table id="myTabl

jQuery分类过滤和排序布局插件-Isotope

Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件.Isotope是Masonry布局的作者David DeSandro的一款力作,该分类过滤和排序插件允许你以非常简单和炫酷的方式来隐藏和显示元素,以及对元素按照指定的规则进行排序. Isotope可以设置多种布局方式:masonry布局.水平布局.垂直布局.适合行布局.适合列布局等等. 注意:Isotope不是完全免费的软件.用于商业用途时需要向作者购买.作为非商业用途使用时,在遵循 GPL v3 License 规范的前

jQuery下拉列表框操作和排序

对<select></select>标签中的option进行排序,option具有两个属性,一个是text一个是value 由于text一般都是展示的内容,并不是我们想要进行的排序字段,而value是隐藏的. 所以我们可以通过value来进行排序. PS:在用下拉列表框进行选中一个item时,用$(this).selected=true不如用 $(this).attr('selected',true)好,因为在某些情况下,前者说不定就不起中用了的, 我是有亲身体验的. 排序js如下

jquery自带的排序方法（js也是）

jquery.sort() js.sort() <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title></title>     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   </

jquery中去重复排序(函数: $.grep() join() sort() )

1.首先把字符串分割为数组(中文除外) var str = '12345678543'; var array = str.split ("");//分割为数组 console.log (array);结果如下: 2.去除重复值 //去除数组中重复的项 function uniQueue(array){ var arr=[]; var m; while(array.length>0){ m=array[0]; arr.push(m); array=$.grep(array,func

jQuery 鼠标拖拽排序

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title> <style type="text/css"> body, div { margin: 0; paading: 0; f

使用jquery排重并排序

var tmp  = '1,6,6,7,7,8,2,3,3,4,4,5'; var tmpJson = {}; $.each(tmp.split(','), function(i, n){   tmpJson['a'+n] = n; }); var tmpArr = []; $.each(tmpJson, function(i,n){   tmpArr.push(n) }); console.log(tmpArr.sort())

jquery 排序table的列

Jquery对Table表格排序(方法一) 分类: JQUERY开发 CSS开发 2012-12-22 15:45 3452人阅读 评论(0) 收藏 举报 [css] view plaincopy 在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理. 为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格