<!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. java String字符串

      五.java数据类型之String(字符串) CreateTime--2017年7月21日16:17:45 Author:Marydon (一)数据格式 (二)初始化 // 方式一 String ...

  2. maven 如何给web项目添加jar包依赖

      maven 如何给web项目添加jar包依赖 CreateTime--2018年4月19日19:06:21 Author:Marydon 开发工具:eclipse 1.打开pom.xml文件--& ...

  3. java 在控制台上输入密码时，密码不显示在控制台上

    用下面的方法可以实现在控制台上输入密码时,密码不显示在控制台上:Console cons=System.console(); System.out.print(" 密码:"); c ...

  4. JSP，servlet和数据库之间传值出现乱码的问题

     近期困扰我非常久的一个问题最终攻克了,为他我头疼了好几天,问题是JSP通过servlet向数据库传值,查询显示在页面的时候出现了乱码,原先我数据库中有两行带有中文的数据,查询的时候倒是没有出现乱 ...

  5. mysql之InnoDB内存管理

    InnoDB缓冲池是通过LRU算法来管理page的.频繁使用的page放在LRU列表的前端,最少使用的page在LRU列表的尾端,缓冲池满了的时候,优先淘汰尾端的page. InnoDB中的LRU结构 ...

  6. 【LeetCode】93. Restore IP Addresses

    Restore IP Addresses Given a string containing only digits, restore it by returning all possible val ...

  7. Ant build xml中的各种变量解释

    Ant build.xml中的各种变量 Ant环境变量分为四种: 1.      build.properties文件中定义的变量 2.      build.xml文件中定义的变量, 3.      ...

  8. RAC安装GI时运行root.sh脚本结果

    第一节点运行root.sh脚本的结果: # /u01/app//grid/root.sh Performing root user operation for Oracle 11g The follo ...

  9. Form_Form Builder的常用变量（概念）

    2014-12-30 Created By BaoXinjian

  10. Android 监听 Android中监听系统网络连接打开或者关闭的实现代码

    本篇文章对Android中监听系统网络连接打开或者关闭的实现用实例进行了介绍.需要的朋友参考下 很简单,所以直接看代码 复制代码 代码如下: package xxx; import android.c ...