js實現(xiàn)按鈕進(jìn)行某行上移下移
本文實例為大家分享了js實現(xiàn)按鈕進(jìn)行某行上移下移的具體代碼,供大家參考,具體內(nèi)容如下
先上個通用簡單的代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>使用js實現(xiàn)上移、下移、置頂、置底功能及源碼案例</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="jquery-1.7.1.min.js"></script> <style> ?.demo li{line-height: 30px;border-bottom: 1px solid #000;} ?.demo li a{padding: 0 20px;} </style> </head> <body> ? <ul id="addChildDiv"> ?<li>001 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置頂</a><a href="#" class="bottom1">置底</a></li> ?<li>002 <a href="#" class="up1">上移</a><a href="#" class="down">下移</a><a href="#" class="top1">置頂</a><a href="#" class="bottom1">置底</a></li> ?<li>003 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置頂</a><a href="#" class="bottom1">置底</a></li> ?<li>004 <a href="#" class="up1">上移</a><a href="#" class="down1">下移</a><a href="#" class="top1">置頂</a><a href="#" class="bottom1">置底</a></li> </ul> <script> ?$("#addChildDiv").on('click', 'a', function(event) { ? event.preventDefault; ? var parent=$(this).parent(); ? var parents=$(this).parents("#addChildDiv"); ? var len=parents.children().length; ? if(($(this).is(".up1") || $(this).is(".top1")) && parent.index()==0){ ? ?return false; ? }else if(($(this).is(".down1") || $(this).is(".bottom1")) && parent.index()==len-1){ ? ?return false; ? } ? switch (true) { ? ?case $(this).is(".up1"): ? ? var prev = parent.prev(); ? ? parent.insertBefore(prev); ? ? break; ? ?case $(this).is(".down1"): ? ? var next = parent.next(); ? ? parent.insertAfter(next); ? ? break; ? ?case $(this).is(".top1"): ? ? parents.prepend(parent); ? ? break; ? ?case $(this).is(".bottom1"): ? ? parents.append(parent); ? ? break; ? } ?}); </script> </body> </html>
樣式如下:
以下是實際運(yùn)用,包括移動后獲取數(shù)據(jù),每一行的順序等等:
//獲取數(shù)據(jù)后插入頁面 function getLine(){ ?? ?var childAreaListSize = ${childAreaListSize }; ?? ?var childAreaList = ${childAreaList }; ?? ?for(var i=0;i<childAreaListSize;i++){ ?? ??? ?++a; ?? ??? ?var tar = "<li>"; ?? ??? ?tar += " <input type=\"hidden\" id=\"awId_" +a+ "\" name=\"awId_" +a+"\" value=\""+ childAreaList[i].id + "\" ?/>"; ?? ??? ? ?? ??? ?tar += " <span style=\"color: red;\">*</span>"; ?? ??? ?tar += " <span \">工程代碼:</span>"; ?? ??? ?tar += " <input ?style=\"width:250px\" type=\"text\" id=\"awCode_" +a+ "\" name=\"awCode_" +a+"\" value=\""+ childAreaList[i].awCode + "\" ?maxlength=\"50\" readonly/>"; ?? ??? ? ?? ??? ? ?? ??? ?tar += " <span style=\"color: red;\">*</span>"; ?? ??? ?tar += " <span \">工程名稱:</span>"; ?? ??? ?tar += " <input ?style=\"width:250px\" type=\"text\" id=\"awName_" +a+ "\" name=\"awName_" +a+"\" value=\""+ childAreaList[i].awName + "\" maxlength=\"50\" readonly/>"; ?? ??? ? ?? ??? ?tar += " ?<a href=\"###\" class=\"top1\" \">置頂</a>"; ?? ??? ?tar += " ?<a href=\"###\" class=\"up1\" \">上移</a>"; ?? ??? ?tar += " ?<a href=\"###\" class=\"down1\" \">下移</a>"; ?? ??? ?tar += " ?<a href=\"###\" class=\"bottom1\" \">置底</a>"; ?? ??? ?tar += "</li>"; ?? ??? ? ?? ??? ? ?? ??? ?$("#addChildDiv").append(tar); ?? ??? ? ?? ?} ?} ? //排序 $("#addChildDiv").on('click', 'a', function(event) { ?? ? ?event.preventDefault; ?? ? ?var parent=$(this).parent(); ?? ? ?var parents=$(this).parents("#addChildDiv"); ?? ? ?var len=parents.children().length; ?? ? ?if(($(this).is(".up1") || $(this).is(".top1")) && parent.index()==0){ ?? ? ? return false; ?? ? ?}else if(($(this).is(".down1") || $(this).is(".bottom1")) && parent.index()==len-1){ ?? ? ? return false; ?? ? ?} ?? ? ?switch (true) { ?? ? ? case $(this).is(".up1"): ?? ? ? ?var prev = parent.prev(); ?? ? ? ?parent.insertBefore(prev); ?? ? ? ?break; ?? ? ? case $(this).is(".down1"): ?? ? ? ?var next = parent.next(); ?? ? ? ?parent.insertAfter(next); ?? ? ? ?break; ?? ? ? case $(this).is(".top1"): ?? ? ? ?parents.prepend(parent); ?? ? ? ?break; ?? ? ? case $(this).is(".bottom1"): ?? ? ? ?parents.append(parent); ?? ? ? ?break; ?? ? ?} ?? ? }); ? ? //保存數(shù)據(jù) var putFlag = false; //避免重復(fù)提交 function saveData(){ ?? ?if(putFlag == true){ ?? ??? ?$.dialog.tips('禁止重復(fù)提交!',3,'alert.gif',function(){}); ?? ??? ?return false; ?? ?} ?? ? ?? ?$("#num").val(a);//設(shè)置提交的數(shù)量 ?? ?var d=$.dialog.tips('正在執(zhí)行,請稍候...',600,'loading.gif'); ?? ? ?? ?//var list=$("#addChildDiv li input[type='hidden']"); ?獲取id:addChildDiv下的li標(biāo)簽的input標(biāo)簽的hidden類型 ?? ?var list = ","; ?? ?for (var i=0;i<a;i++){ ?? ??? ?// 獲取id:addChildDiv下的第i的li標(biāo)簽的input標(biāo)簽的hidden類型 ?? ??? ?var zzz = $("#addChildDiv").find("li:eq("+i+")").find("input[type='hidden']").val(); ?? ??? ?list = list + zzz +"," ?? ?} ?? ? ?? ? ?? ?//保存 ?? ?putFlag = true; ?? ?$.ajax({ ?? ??? ?type:'post', ?? ??? ?data:{"ids":list}, ?? ??? ?url:'${root}/base/BaseAreaWorkSpace/orderChild.jspx?myId='+$("#myId").val(), ?? ??? ?async:false, ?? ??? ?dataType:"json", ?? ??? ?success:function(data){ ?? ??? ??? ?putFlag = false; ?? ??? ??? ?$.dialog.tips(data.message,3,'alert.gif',function(){}); ?? ??? ??? ?closePop(); ?? ??? ??? ?//600ms后再加載數(shù)據(jù) ?? ??? ??? ?setTimeout(function () {? ?? ??? ??? ??? ?dataLoad(); ?? ??? ??? ?}, 600); ?? ??? ??? ?//d.close(); ?? ??? ?} ?? ?})? }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于js實現(xiàn)數(shù)組相鄰元素上移下移
- js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果
- JS與jQuery實現(xiàn)ListBox上移,下移,左移,右移操作功能示例
- js實現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實例
- Vue.js實現(xiàn)一個todo-list的上移下移刪除功能
- AngularJS實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實例
- JS實現(xiàn)的表格操作類詳解(添加,刪除,排序,上移,下移)
- js實現(xiàn)Select列表各項上移和下移的方法
- JS實現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法
- JS實現(xiàn)一個列表中包含上移下移刪除等功能
相關(guān)文章
JS+HTML5本地存儲Localstorage實現(xiàn)注冊登錄及驗證功能示例
這篇文章主要介紹了JS+HTML5本地存儲Localstorage實現(xiàn)注冊登錄及驗證功能,結(jié)合實例形式分析了基于JS+HTML5本地存儲Localstorage實現(xiàn)注冊登錄及驗證相關(guān)操作技巧,需要的朋友可以參考下2020-02-02javascript實現(xiàn)簡單的頁面右下角提示信息框
本文給大家分享的是使用javascript實現(xiàn)簡單的頁面右下角提示信息框的方法和示例代碼,有需要的小伙伴可以參考下。2015-07-07百度地圖JavascriptApi Marker平滑移動及車頭指向行徑方向
本文主要介紹了百度地圖JavascriptApi Marker平滑移動及車頭指向行徑方向的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實現(xiàn)無刷新
這篇文章主要介紹了js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax無刷新的具體實現(xiàn),需要的朋友可以參考下2014-02-02