码迷,mamicode.com
首页 > 移动开发 > 详细

Jquery之实现上下移动和排序

时间:2016-05-07 08:01:01      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

开心一笑

一哥们在漳州呆腻了,就到法国去度度假散散心
刚到巴黎第一天上街,见很多人在买彩票抽奖,有人抽中三等奖LV包,有人抽中二等奖劳力士金表……
这哥们看了看,也上去想碰碰运气,掏钱就买了一张。打开一看,众人立即欢呼,一等大奖出现了!
哥们欢呼雀跃,真是幸运!
工作人员上前告诉他:先生恭喜你,准备好行李,明天出发,一等奖是去中国漳州南山寺、南靖土楼5曰游!…….[偷笑][偷笑]

提出问题

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>

读书感悟

  • 当遭遇痛苦的时候,牢记以下三点:
    1.咬紧牙关,一天一天熬下去;
    2.多做点事,欺骗你的大脑;
    3.想想你爱的人。

  • 终于有一天,痛苦好似死皮一样,逐渐退去。你如同新生,甚至更为敏感。你重新觉得花是香的,草是绿的,清风拂过脸。

  • 没有超能力,但是我们可以超乐观,改变对生活的态度,我们就能变成自己世界中的超级英雄。

其他

如果有带给你一丝丝小快乐,就让快乐继续传递下去,欢迎转载,点赞,顶,欢迎留下宝贵的意见,多谢支持!

Jquery之实现上下移动和排序

标签:

原文地址:http://blog.csdn.net/huangwenyi1010/article/details/51333395

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!