js實(shí)現(xiàn)按鈕進(jìn)行某行上移下移
本文實(shí)例為大家分享了js實(shí)現(xiàn)按鈕進(jìn)行某行上移下移的具體代碼,供大家參考,具體內(nèi)容如下
先上個(gè)通用簡(jiǎn)單的代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>使用js實(shí)現(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>
樣式如下:
以下是實(shí)際運(yùn)用,包括移動(dòng)后獲取數(shù)據(jù),每一行的順序等等:
//獲取數(shù)據(jù)后插入頁(yè)面 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 \">工程名稱(chēng):</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í)行,請(qǐng)稍候...',600,'loading.gif'); ?? ? ?? ?//var list=$("#addChildDiv li input[type='hidden']"); ?獲取id:addChildDiv下的li標(biāo)簽的input標(biāo)簽的hidden類(lèi)型 ?? ?var list = ","; ?? ?for (var i=0;i<a;i++){ ?? ??? ?// 獲取id:addChildDiv下的第i的li標(biāo)簽的input標(biāo)簽的hidden類(lèi)型 ?? ??? ?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(); ?? ??? ?} ?? ?})? }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于js實(shí)現(xiàn)數(shù)組相鄰元素上移下移
- js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果
- JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
- js實(shí)現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實(shí)例
- Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
- AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例
- JS實(shí)現(xiàn)的表格操作類(lèi)詳解(添加,刪除,排序,上移,下移)
- js實(shí)現(xiàn)Select列表各項(xiàng)上移和下移的方法
- JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法
- JS實(shí)現(xiàn)一個(gè)列表中包含上移下移刪除等功能
相關(guān)文章
JS+HTML5本地存儲(chǔ)Localstorage實(shí)現(xiàn)注冊(cè)登錄及驗(yàn)證功能示例
這篇文章主要介紹了JS+HTML5本地存儲(chǔ)Localstorage實(shí)現(xiàn)注冊(cè)登錄及驗(yàn)證功能,結(jié)合實(shí)例形式分析了基于JS+HTML5本地存儲(chǔ)Localstorage實(shí)現(xiàn)注冊(cè)登錄及驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2020-02-02js GridView 實(shí)現(xiàn)自動(dòng)計(jì)算操作代碼
js操作GridView,實(shí)現(xiàn)自動(dòng)計(jì)算的實(shí)現(xiàn)代碼,下面的代碼運(yùn)行即可2009-03-03javascript實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面右下角提示信息框
本文給大家分享的是使用javascript實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面右下角提示信息框的方法和示例代碼,有需要的小伙伴可以參考下。2015-07-07百度地圖JavascriptApi Marker平滑移動(dòng)及車(chē)頭指向行徑方向
本文主要介紹了百度地圖JavascriptApi Marker平滑移動(dòng)及車(chē)頭指向行徑方向的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03js動(dòng)態(tài)創(chuàng)建上傳表單通過(guò)iframe模擬Ajax實(shí)現(xiàn)無(wú)刷新
這篇文章主要介紹了js動(dòng)態(tài)創(chuàng)建上傳表單通過(guò)iframe模擬Ajax無(wú)刷新的具體實(shí)現(xiàn),需要的朋友可以參考下2014-02-02js設(shè)置默認(rèn)時(shí)間跨度過(guò)程詳解
這篇文章主要介紹了js設(shè)置默認(rèn)時(shí)間跨度過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07