Jquery之实现上下移动和排序
2016-05-06 17:37
591 查看
开心一笑
一哥们在漳州呆腻了,就到法国去度度假散散心刚到巴黎第一天上街,见很多人在买彩票抽奖,有人抽中三等奖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实现跳转到页面指定位置
- jquery提示信息 tips
- Jquery获得控件值的三种方法总结
- 【Yii2】Yii2执行完composer install 出现 vendor/bower/jquery/dist 找不到的解决方案
- jQuery:多个AJAX/JSON请求对应单个回调并行加载
- JQUERY 筛选 函数详解
- jquery mobile开发中常见的问题(转载)
- 子元素取行列标题
- 简单的jQuery图片标注效果
- Jquery Post提交时Content-Type的不同取值详解
- jquery实现下拉框功能效果【实例代码】
- jquery设置元素readonly和disabled(checkbox只读)
- jquery自定义插件――window的实现【示例代码】
- jquery-uploadify传参方法
- jquery $.trim()方法使用介绍
- indexOf() lastIndexOf() 与 jQuery.inArray()
- jQuery 获取屏幕高度、宽度
- jQuery获取页面及个元素高度、宽度
- 十条jQuery代码片段助力Web开发效率提升
- jQuery侧边栏实现代码