<!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. tarfile模块可以方操作tar归档文件

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python自带的tarfile模块可以方便读取tar归档文件 #http://www.open-open. ...

  2. ValueError: Expecting property name: line 1 column 1 (char 1)

    # -*- coding: cp936 -*- #xiaodeng #python 2.7.10 import weibo s='{"name":"xiaodeng&qu ...

  3. Drupal Form问题汇总

    问:如何校验和提交表单?答:Drupal允许定义默认的表单校验处理函数和提交处理函数. function practice_demo_form($form, &$form_state) { . ...

  4. ASP.NET#LinqDataSource控件配置对象模型时遇到的问题

    使用LinqDataSource控件时,配置数据源的时候,发现没有DataContext对象可选,但已通过可视化操作完成了对象模型的建立.这个时候,可以通过现在Default.aspx.cs文件中做如 ...

  5. HDUOJ------------1051Wooden Sticks

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  6. JavaScript 设计模式之代理模式

    一.代理模式概念解读 1.代理模式概念文字解读 代理,顾名思义就是帮助别人做事,GOF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象 ...

  7. WordPress网站搬家经验总结

    http://cnzhx.net/blog/move-wordpress-site-step-by-step/也许很多人都有跟我类似的经历:因为某种原因需要将自己的WordPress站点从一个空间转移 ...

  8. android离线地图源码

    最近一直在玩Android手机,当然也忘不了在这个平台下搞些和地图相关的东西. Android手机自带了Google的地图软件,不过原来不支持离线浏览,所以很费流量,5.0版本以后可以支持离线浏览,需 ...

  9. jquery实现高度的获取-位置函数

    一.位置函数 1.offset() 获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. 2.innerWidth() 获取第一个匹配元素内部区 ...

  10. printDocument设置适应边框打印 特重要 找了半天 设置一个属性即可

    private void pd_PrintPage(object sender, PrintPageEventArgs e) { e.Graphics.SmoothingMode = System.D ...