<!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.lang.OutOfMemoryError: unable to create new native thread问题

    解决:1.升级JVM到最新的版本 最新版本的JVM一般在内存优化方面做的更好,升级JVM到最新的版本可能会缓解测问题2.从操作系统层面去解决 使用64位操作系统 如果使用32位操作系统遇到unable ...

  2. MySQL Event计划任务刷慢日志

    前言 最近在尝试一个日志系统graylog来收集mysql的慢查询日志提,供后续的分析.监控和报警等.测试步骤已经到日志已成功收集到graylog,测试时需要刷一些慢查询日志出来.为了刷比较多的日志和 ...

  3. 【转】Html.RenderPartial与 Html.RenderAction的区别

    Html.RenderPartial与Html.RenderAction 这个两个方法都是用于把MVC用户控件嵌入到View中. Html.RenderPartial是直接将MVC用户控件嵌入到界面上 ...

  4. poj 2195 Going Home（最小费最大流）

    poj 2195 Going Home Description On a grid map there are n little men and n houses. In each unit time ...

  5. 〖Linux〗gvim使用alt+1,2,3..进行标签页切换

    gvim ~/.gvimrc,往里边添加: """"""""""""" ...

  6. spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除，限制为图片代码等相关配置

    spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...

  7. VMware Player 12.5.0 中文免费版

    VMWare Player优点:– 免费的 VMWare Player 体积仅90多MB,相比7百多MB且还要付费的 VMware Workstation 无疑更适合个人用户使用– 主界面清爽简洁,几 ...

  8. SQL plus连接远程Oralce数据库

    如果要连接远程数据库,传统的一定可行的方法是在本地装一个oracle,然后使用“Network Configuration Assistant”配置,之后用PL/SQL Dev连接 oracle官网上 ...

  9. 【转载】MyEclipse使用指南(精简版)

    1.安装 2.注册 3.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JR ...

  10. HDUOJ--1058HangOver

    HangOver Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...