JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法
本文實(shí)例講述了JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法。分享給大家供大家參考。具體如下:
這里演示JavaScript排序功能,點(diǎn)擊按鈕實(shí)現(xiàn)數(shù)據(jù)的上移和下稱,一共有兩組測試效果,上組采用箭頭圖標(biāo)控制的方式,更美觀,下組是直接使用文字,根據(jù)你的需要自行選擇。myList為ul的id值,m為0顯示文字,m為1顯示圖片,mO、mT為文字或圖片內(nèi)容。
演示效果如下圖所示:
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <title>JS移動li行數(shù)據(jù),點(diǎn)擊上移下移</title> <style type="text/css"> * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon {width:500px;list-style:none;} #pCon li {height:20px;display:block;border-bottom:1px #ccc solid;} #pCon li a{margin-left:5px;text-decoration:none;} #pCon li a:hover{cursor:hand;} .context {float:left;display:inline;} .control {float:right;display:inline;} .control img {width:50px;height:12px;overflow:hidden;float:left;display:inline;} hr {margin:30px auto;} #pCon1 {width:500px;list-style:none;} #pCon1 li {height:20px;display:block;border-bottom:1px #ccc solid;} #pCon1 li a{margin-left:5px;text-decoration:none;} #pCon1 li a:hover{cursor:hand;} </style> </head> <body> <div class="content"> <ul id="pCon"> <li><div class="context">點(diǎn)擊右側(cè)箭頭上移下移A</div></li> <li><div class="context">點(diǎn)擊右側(cè)箭頭上移下移B</div></li> <li><div class="context">點(diǎn)擊右側(cè)箭頭上移下移C</div></li></ul> <hr/> <ul id="pCon1"> <li><div class="context">測試數(shù)據(jù)你相信么A</div></li> <li><div class="context">測試數(shù)據(jù)你相信么B</div></li> <li><div class="context">測試數(shù)據(jù)你相信么C</div></li> </ul> </div> <script> function moveSonU(tag,pc){ var tagPre=get_previoussibling(tag); var t=document.getElementById(pc); if(tagPre!=undefined){ t.insertBefore(tag,tagPre); } } function moveSonD(tag){ var tagNext=get_nextsibling(tag); if(tagNext!=undefined){ insertAfter(tag,tagNext); } } function get_previoussibling(n){ if(n.previousSibling!=null){ var x=n.previousSibling; while (x.nodeType!=1) { x=x.previousSibling; } return x; } } function get_nextsibling(n){ if(n.nextSibling!=null){ var x=n.nextSibling; while (x.nodeType!=1) { x=x.nextSibling; } return x; } } function insertAfter(newElement,targetElement){ var parent=targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextSibling); } } function myOrder(myList,m,mO,mT){ //myList為ul的id值,m為0顯示文字,m為1顯示圖片,mO、mT為文字或圖片內(nèi)容 var pCon=document.getElementById(myList); var pSon=pCon.getElementsByTagName("li"); for(i=0;i<pSon.length;i++){ var conTemp=document.createElement("div"); conTemp.setAttribute("class","control"); var clickUp=document.createElement("a"); var clickDown=document.createElement("a"); if(m==0){ var upCon=document.createTextNode(mO); var downCon=document.createTextNode(mT); }else{ var upCon=document.createElement("img"); var downCon=document.createElement("img"); upCon.setAttribute("src",mO); downCon.setAttribute("src",mT); } clickUp.appendChild(upCon); clickUp.setAttribute("href","#"); clickDown.appendChild(downCon); clickDown.setAttribute("href","#"); pSon[i].appendChild(conTemp); conTemp.appendChild(clickUp); conTemp.appendChild(clickDown); clickUp.onclick=function(){ moveSonU(this.parentNode.parentNode,myList); } clickDown.onclick=function(){ moveSonD(this.parentNode.parentNode); } } } myOrder("pCon",1,"http://img.jbzj.com/file_images/article/201508/201585153341254.png?201575153424","http://img.jbzj.com/file_images/article/201508/201585153353977.png?20157515349"); myOrder("pCon1",0,"上移","下移"); </script> </body> </html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- 基于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)的表格操作類詳解(添加,刪除,排序,上移,下移)
- js實(shí)現(xiàn)Select列表各項(xiàng)上移和下移的方法
- JS實(shí)現(xiàn)一個(gè)列表中包含上移下移刪除等功能
- js實(shí)現(xiàn)按鈕進(jìn)行某行上移下移
相關(guān)文章
contains和compareDocumentPosition 方法來確定是否HTML節(jié)點(diǎn)間的關(guān)系
一個(gè)很棒的 blog 文章,是 PPK 兩年前寫的,文章中解釋了 contains() 和 compareDocumentPosition() 方法運(yùn)行在他們各自的瀏覽器上。2011-09-09使用cookie繞過驗(yàn)證碼登錄的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家詳細(xì)介紹了使用cookie繞過驗(yàn)證碼登錄的實(shí)現(xiàn)方法,需要的朋友參考下吧2017-10-10JavaScript實(shí)現(xiàn)京東放大鏡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)京東放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12JavaScript中擴(kuò)展Array contains方法實(shí)例
這篇文章主要介紹了JavaScript中擴(kuò)展Array contains方法實(shí)例,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03JavaScript實(shí)現(xiàn)星星等級評價(jià)功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星星等級評價(jià)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03javascript實(shí)現(xiàn)多級聯(lián)動下拉菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)多級聯(lián)動下拉菜單的方法,通過javascript自定義函數(shù)實(shí)現(xiàn)對多級聯(lián)動下拉菜單的操作,是非常實(shí)用的技巧,需要的朋友可以參考下2015-02-02