Jquery實(shí)現(xiàn)上下移動(dòng)和排序代碼
提出問(wèn)題:
下文為大家介紹下Jquery實(shí)現(xiàn)上下移動(dòng)和排序,感興趣的朋友可以了解一下。
解決問(wèn)題
代碼實(shí)現(xiàn):
<!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); //獲得當(dāng)前行 var curTr = $this.parents("tr"); var curOrderNum = $this.val(); //當(dāng)前行同級(jí)的所有行 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>
效果如下:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery ui sortable拖拽后保存位置
- 通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例
- jquery sortable的拖動(dòng)方法示例詳解
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- jquery控制listbox中項(xiàng)的移動(dòng)并排序
- jquery對(duì)元素拖動(dòng)排序示例
- 基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
- jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序
- jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
- jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序
相關(guān)文章
jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)不包含當(dāng)前項(xiàng)的選擇器,實(shí)例分析了jquery選擇器的使用技巧,需要的朋友可以參考下2015-06-06jQuery事件綁定.on()簡(jiǎn)要概述及應(yīng)用
前幾天看到事件委托的時(shí)候,關(guān)于live()方法講的不是很詳細(xì),就去搜了一下關(guān)于live()和delegate()的,最后看源碼發(fā)現(xiàn)bind()和delegate()都是由on()實(shí)現(xiàn)的,感興趣的朋友可以了解下,或許本文對(duì)你有所幫助2013-02-02jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery.multiselect 多選下拉框?qū)崿F(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11解決jquery1.9不支持browser對(duì)象的問(wèn)題
項(xiàng)目里面一直用的都是jquery1.9,不支持browser對(duì)象,百度一下,找到了解決方案在此與大家分享下,有遇到此問(wèn)題的朋友不要錯(cuò)過(guò)2013-11-11Jquery+JSon 無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼
基于jquery+json格式文件的無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-04-04jquery右下角自動(dòng)彈出可關(guān)閉的廣告層
jQuery實(shí)現(xiàn)右下角自動(dòng)彈出可關(guān)閉的懸浮提示層特效。這種效果可以使用jQuery彈出層實(shí)現(xiàn)。有需要的小伙伴可以參考下。2015-05-05