<!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. Redis学习（2）-redis安装

    安装redis需要先从官网下载的源码进行编译,编译依赖GCC环境,如果没有GCC环境,需要安装GCC. yum install gcc-c++ 步骤1:上传 将Windows下下载的压缩文件上传Lin ...

  2. java Socket Udp聊天

    import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import jav ...

  3. history设置时间戳

    Linux查看历史命令,很关键!history,默认没有时间戳... 01.设置系统环境变量 echo 'export HISTTIMEFORMAT="%F %T  `whoami` &qu ...

  4. MikroTik RB750r2/RB750gr3 操作记录

    1. 客户端的下载 http://www.mikrotik.com/download  下载 winbox 2. Reset重置密码的正确姿势 http://wiki.mikrotik.com/ind ...

  5. Mysql 5.7 从节点配置多线程主从复制

    Mysql 采用多线程进行复制是从 Mysql 5.6 开始支持的内容,但是 5.6 版本下有缺陷,虽然支持多线程,但是每个数据库只能一个线程,也就是说如果我们只有一个数据库,则主从复制时也只有一个线 ...

  6. 使用 Eclipse 远程调试 Java 应用程序

    Eclipse 中的远程调试特性 Eclipse 是一个图形化 Java 调试器前端.JDI 在 org.eclipse.jdt.debug 包中实现.本文不详细讨论 JDI 实现.参见 参考资料 获 ...

  7. getsockopt和accept需要注意的两个细节

    1,getsockopt连续调用问题 通常情况下,在一个socket fd上出现错误时,我们会通过 int status; socklen_t slen; getsockopt(fd, SOL_SOC ...

  8. IDEA编辑区光标样式修改

    转自:http://blog.csdn.net/aosica321/article/details/52787418 Intellj IDEA光标为insert状态,无法删除内容以前用得是社区版的ID ...

  9. ＨＤＵＯＪ－－－What Are You Talking About

    What Are You Talking About Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/204800 K ...

  10. XP和Win 7双系统安装说明和注意事项

    安装前说明: 1.先装XP,再装Windows 7,最好不要反过来,不然XP不会把Windows 7的启动管理器给覆盖掉,会麻烦些.总之遵循“旧版本到新版本”安装原则. 2.如果分区不够大,请用以下软 ...