JS实现上下点击LI行数据的方法

本文介绍了JS点击上下LI线数据的方法。分享给大家参考。具体如下：

这里，演示了JavaScript排序功能。点击按钮，实现数据的向上移动和向下描述。有两组测试结果。上组由箭头图标控制，更美观，下组直接使用文字，可以根据需要选择。MyList是ul的id值，m为0表示显示文本，m为1表示显示图片，mO和mT为文本或图片内容。

演示效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearta content=' text/html；字符集=UTF-8移动里行数据，点击上移下移/title style type=' text/CSS ' * { padd :0；margin:0}。内容{ width :500 pxmargin :20 px汽车；} # PCon { width :500 pxlist-style : none；} # pCon li { height:20px显示：块；边框-底部：1px #ccc实心；} #pCon阿利{左边距：5 px文本装饰：无；} # PCon阿利：悬停{光标：手；} .上下文{ float : leftisplay : inline }。控件{ float : right display : inline }。控制img { width :50 pxh three :12 px飞越：隐藏；float : leftisplay : inline } HR { margin :30 px auto } # PC1 { width :500 pxlist-style : none；} # pCon1 li { height:20px显示：块；边框-底部：1px #ccc实心；} # pCon1阿利{左边距：5 px文本装饰：无；} # PC1阿利：悬停{光标：手；}/style/head dydiv class=' content ' ul id=' PCon ' lidiv class=' context '点击右侧箭头上移下移A/div/lilidiv class='context '点击右侧箭头上移下移B/div/lilidiv class='context '点击右侧箭头上移下移c/div/Li/ulhr/ul id=' PC1 ' lidiv class=' context '测试数据你相信么A/div/lilidiv class='context '测试数据你相信么B/div/lilidiv class='context '测试数据你相信么c/div/Li/ul/div脚本函数移动sonu(标记，PC){ var tagPre=get _ previoussible(标记);var t=文档。getelementbyid(PC)；如果(tagPre！=未定义){ t.insertBefore(标记，TagPre)；} }函数移动探测器(标记){ var tagNext=get_nextsibling(标记);if(tagNext！=未定义){ insertAfter(标记，tagNext)；} }函数get _ previous sible(n){ if(n . previous sible！=null){ var x=n . previoussible；while (x.nodeType！=1){ x=x . previoussible；}返回x；} }函数get _ next同级(n){ if(n . next同级！=null){ var x=n .下一个兄弟；while (x.nodeType！=1){ x=x .下一个兄弟；}返回x；} }函数insertAfter(newElement，TargetElement){ var parent=TargetElement。父节点；if(家长。last child==TargetElement){ parent。append child(NewElement)；} else { parent。在(NewElement，targetElement.nextSibling)之前插入函数myOrder(myList，m，mO，mT){//myList为保险商实验所的编号值，m为0显示文字，m为一显示图片，mO，mT为文字或图片内容var pCon=文档。getelementbyid(我的列表)；var PsON=PCon。GetElementsBytagname(' Li ')；for(I=0；ipson . lengthi){ var Contemp=document。create element(' div ')；conTemp.setAttribute('class '，' control ')；var click up=文档。创建元素(' a ')；var点击向下=文档。创建元素(' a ')；if(m==0){ var UPc=document。create text node(mO)；var down con=文档。createtextnode(mT)；} else { var OcL=document。创建元素(' img ')；var down con=文档。创建元素(' img ')；升频。setAttribute('src '，mO)；downCon.setAttribute('src '，mT)；}点击Up.appendChild(上转);单击Up.setAttribute('href '，' # ')；单击Down.appendChild(向下);单击Down.setAttribute('href '，' # ')；pSon[i].appendChild(当代);conTemp.appendChild(单击向上);conTemp.appendChild(单击向下);点击向上。onclick=function(){ move sonu(this。父节点。父节点，我的列表)；}点击向下。onclick=function(){ move sond(this。父节点。父节点)；} }}myOrder('pCon '，1，'//文件。JB 51。net/file _ images/article/201585153341254。巴布亚新几内亚？201575153424 '，'//文件。JB 51。net/file _ images/article/201508/201585153353977。巴布亚新几内亚？20157515349');我的订单(' PC1，0 '上移','下移');/脚本/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。