<!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="pCon1">
<li id="id1"><div class="context">测试数据你相信么A</div></li>
<li id="id2"><div class="context">测试数据你相信么B</div></li>
<li id="id3"><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;
    }
}
//DOM没有提供insertAfter()方法
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("pCon1",0,"上移","下移");
</script>
</body>
</html>

JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）的更多相关文章

  1. js实现多行图片点击（自动）左右无缝轮播特效

    /*效果图*/ HTML:    <div class="scroll">       <div class="picbox">     ...

  2. js动态加载数据到文本框指定的位置

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. elementUI table怎么实现点击上移下移

    其实炒鸡简单...   <el-table :data='tableData' > ... ...  <el-table-column label="操作" al ...

  4. 在用easyui中做CRUD功能时，当删除一行或多行数据后再点击修改会提示你选中了多行，如何解决这个bug了?

    在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了? 在删除成功后,加上这句话就可以了:$("#dg").datagrid ...

  5. 05_jquery 操作table使tr(数据)整行上移下移

    1:ajax请求数据到页面 function GetWorkSpaceList() { GetServerData("get", GetEnterpriseUrl() + &quo ...

  6. JS遍历表格获取每行数据及每个单元格数据

    /** * 遍历表格获取每行数据及每个单元格数据 * @param tableID 表格ID */ function GetTable(tableID) { var milasUrl = {};//新 ...

  7. Saiku设置展示table数据不隐藏空的行数据信息（二十六）

    Saiku设置展示table数据不隐藏空的行数据信息 saiku有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...

  8. 在Bootstrap开发框架中使用dataTable直接录入表格行数据

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...

  9. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

随机推荐

  1. Tomcat启动时选择加载项目

    到tomcat\conf\Catalina\localhost下新建文件:myapp.xml 内容如下: <Context path="/myapp" docBase=&qu ...

  2. [Python]网络爬虫（七）：Python中的正则表达式教程

    转自:http://blog.csdn.net/pleasecallmewhy/article/details/8929576#t4 接下来准备用糗百做一个爬虫的小例子. 但是在这之前,先详细的整理一 ...

  3. git工具 将源码clone到本地指定目录的三种方式

      git工具 将源码clone到本地指定目录的三种方式 CreationTime--2018年7月27日15点34分 Author:Marydon 1.情景展示 运行git-bash.exe,输入命 ...

  4. logging日志管理-将日志写入文件

    # -*- coding: cp936 -*- # test.py #http://blog.chinaunix.net/uid-27571599-id-3492860.html #logging日志 ...

  5. Linux系统中用stat命令查看文件的三个时间属性

    在Linux中,没有文件创建时间的概念.只有文件的访问时间.修改时间.状态改变时间.也就是说无法知道文件的创建时间. [root@rhel7 yum.repos.d]# stat cdrom.repo ...

  6. 用Canvas为网页加入动态背景

    近期刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务. 考虑到页面仅仅在手机中浏览.并且手机对canvas的支持又很好,所以打算使用canvas做点不一样的动画. 首先来看下效果 ...

  7. 【微信小程序】用户首次进入小程序拒绝授权，如何再次调用授权页面，获取用户信息userInfo

    前言:微信小程序的app.js里面,最少有2个接口,一个wx.login:一个是wx.getUserInfo: 前者得到腾讯给我们的微信用户唯一的code,通过code获取openid,这个不需要用户 ...

  8. Centos下cacti的安装

    介绍 Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.Cacti是通过 snmpget来获取数据,使用 RRDtool绘画图形.它提供了非常强大的数据和 ...

  9. [转载]linux创建用户命令

    原文地址:linux创建用户命令作者:疯狂的核桃 创建用户.设置密码.修改用户.删除用户: useradd testuser   创建用户testuser passwd testuser   给已创建 ...

  10. 使用springboot遇到的的异常

    Unregistering JMX-exposed beans on shutdown <dependency> <groupId>org.springframework.bo ...