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


Posted in Javascript onAugust 05, 2015

本文实例讲述了JS实现点击上移下移LI行数据的方法。分享给大家供大家参考。具体如下:

这里演示JavaScript排序功能,点击按钮实现数据的上移和下称,一共有两组测试效果,上组采用箭头图标控制的方式,更美观,下组是直接使用文字,根据你的需要自行选择。myList为ul的id值,m为0显示文字,m为1显示图片,mO、mT为文字或图片内容。

演示效果如下图所示:

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

具体代码如下:

<!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,"//img.jbzj.com/file_images/article/201508/201585153341254.png?201575153424","//img.jbzj.com/file_images/article/201508/201585153353977.png?20157515349");
myOrder("pCon1",0,"上移","下移");
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 #Javascript
JS模拟键盘打字效果的方法
Aug 05 #Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 #Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 #Javascript
js绘制圆形和矩形的方法
Aug 05 #Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 #Javascript
JS版元素周期表实现方法
Aug 05 #Javascript
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
layui文件上传实现代码
2017/05/20 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
js实现扫雷源代码
2020/11/27 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
python一键升级所有pip package的方法
2017/01/16 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python logging模块的使用总结
2019/07/09 Python
python 默认参数相关知识详解
2019/09/18 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
给分销商的致歉信
2014/01/14 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
如何写自我鉴定
2014/03/19 职场文书
保健品市场营销方案
2014/03/31 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js