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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
BootStrap 导航条实例代码
May 18 Javascript
vue登录路由验证的实现
Dec 13 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
将页面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学习之PHP表达式
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
JavaScript对象学习小结
2015/09/02 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
JS前端加密算法示例
2016/12/22 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
js正则相关知识点专题
2018/05/10 Javascript
详解redux异步操作实践
2018/08/15 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python实现八大排序算法(1)
2017/09/14 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
详解Python字典的操作
2019/03/04 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
python实现画图工具
2020/08/27 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
仓库管理员岗位职责
2014/03/19 职场文书
企业法人代表证明书
2014/09/27 职场文书
让世界充满爱观后感
2015/06/10 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书