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/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行数据，点击上移下移</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">点击右侧箭头上移下移A</div></li>
<li><div class="context">点击右侧箭头上移下移B</div></li>
<li><div class="context">点击右侧箭头上移下移C</div></li></ul>
<hr/>
<ul id="pCon1">
<li><div class="context">测试数据你相信么A</div></li>
<li><div class="context">测试数据你相信么B</div></li>
<li><div class="context">测试数据你相信么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为文字或图片内容
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://zsrimg.ikafan.com/file_images/article/201508/201585153341254.png?201575153424","http://zsrimg.ikafan.com/file_images/article/201508/201585153353977.png?20157515349");
myOrder("pCon1",0,"上移","下移");
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
JavaScript控制listbox列表框的项目上下移动的方法
本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以控制listbox内的元素向上或者向下移动,这个功能非常有用.下面是详细的代码 复制代码 代码如下: function listbox_move(listID, direction) { var listbox = document.getElementById(listID); var selIndex = listbox.selectedInd
-
JavaScript实现向OL列表内动态添加LI元素的方法
本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my
-
javascript实现的LI列表输出，隔行同色的代码
无标题文档 .mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;} .mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;bord
-
JavaScript实现LI列表数据绑定的方法
本文实例讲述了JavaScript实现LI列表数据绑定的方法.分享给大家供大家参考.具体如下: 利用JavaScript进行LI列表数据绑定,获取列表里面对应的LI,这是一位高人写的代码,看了才知道,原来并不很复杂,为什么之前用的方法那么笨? 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
-
用javascript实现li 列表数据隔行变换背景颜色
New Document title 111 222 333 444 555 666 objName=document.getElementById("list01").getElementsByTagName("li") for (i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
javascript实现listbox左右移动实现代码
1. html部分: 复制代码 代码如下: <table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460" align="left" borderColorLight="#000000" border="1"> <tr bgColor="#cccccc
-
JS实现点击上移下移LI行数据的方法
本文实例讲述了JS实现点击上移下移LI行数据的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript排序功能,点击按钮实现数据的上移和下称,一共有两组测试效果,上组采用箭头图标控制的方式,更美观,下组是直接使用文字,根据你的需要自行选择.myList为ul的id值,m为0显示文字,m为1显示图片,mO.mT为文字或图片内容. 演示效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
-
Layui组件Table绑定行点击事件和获取行数据的方法
一个项目里面用了layui,简直无数个坑... 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据; done: function(res, curr, count){ $('#div').find('.layui-table-body').find("table" ).find("tbody").child
-
jQuery实现表格行上移下移和置顶的方法
本文实例讲述了jQuery实现表格行上移下移和置顶的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <ti
-
JS实现点击Radio动态更新table数据
tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name
-
js鼠标点击图片实现随机变换图片的方法
本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra
-
JS实现点击链接切换显示隐藏内容的方法
本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer
-
JS获得选取checkbox整行数据的方法
本文实例讲述了JS获得选取checkbox整行数据的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js</title> </head> <script language="java
-
js实现点击图片改变页面背景图的方法
本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu
-
js实现点击图片自动提交action的简单方法
利用js实现点击一张图片,直接上传到指定的action,方法简单,一看就会了,只需要用户点击图片一次就可以实现图片上传功能.主要用到了onclick, onchange, display属性,代码可以直接copy用.此代码适合上传单张图片,关于action部分此处没有,这里只简绍页面效果. html代码 <form action="p1.html" id="form" ENCTYPE="multipart/form-data" meth
-
Repeater中添加按钮实现点击按钮获取某一行数据的方法
本文以一个asp.net程序为例讲述了Repeater中添加按钮实现点击按钮获取某一行数据的方法,分享给大家供大家参考借鉴之用.具体步骤如下: 1.添加编辑按钮和删除按钮 具体代码如下: <asp:Repeater ID="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand"> <ItemTemplate> <table width="