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 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
JQuery 文本框使用小结
May 22 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python中time tzset()函数实例用法
2021/02/18 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
医学专业大学生求职信
2014/07/12 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2014全年工作总结
2014/11/27 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL