1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html ul 位置上移 JS移动li行数据 点击上移下移(是位置的互换 不是top的偏移量改变)...

html ul 位置上移 JS移动li行数据 点击上移下移(是位置的互换 不是top的偏移量改变)...

时间:2020-10-25 09:22:57

相关推荐

html ul 位置上移 JS移动li行数据 点击上移下移(是位置的互换 不是top的偏移量改变)...

JS移动li行数据,点击上移下移

* {

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;}

测试数据你相信么A测试数据你相信么B测试数据你相信么C

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

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.οnclick=function(){

moveSonU(this.parentNode.parentNode,myList);

}

clickDown.οnclick=function(){

moveSonD(this.parentNode.parentNode);

}

}

}

myOrder("pCon1",0,"上移","下移");

js实现多行图片点击(自动)左右无缝轮播特效

/*效果图*/ HTML:

...

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

html代码 作"al ...

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

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

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

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

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

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

Saiku设置展示table数据不隐藏空的行数据信息(二十六)

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

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

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

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

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

随机推荐

Thrift架构~目录

回到占占推荐博客索引 概念相关 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ru ...

CodeForces 716A Crazy Computer

题目链接:/problemset/problem/716/A 题目大意: 输入 n c, 第二行 n 个整数,c表示时间间隔 秒. 每个整数代表是第几秒.如果 ...

部署与管理ZooKeeper(转)

本文以ZooKeeper3.4.3版本的官方指南为基础:/doc/r3.4.3/zookeeperAdmin.html,补充一些作者运维实践中的要 ...

WinForm界面布局控件WeifenLuo.WinFormsUI.Docking"的使用 (二)

WinForm界面布局控件WeifenLuo.WinFormsUI.Docking"的使用 (二) 编写人:CC阿爸 -1-29 今天我想与大家继续一起分享这一伟大的控件.有兴趣的同 ...

Redis源码分析系列

0.前言 Redis目前热门NoSQL内存数据库,代码量不是很大,本系列是本人阅读Redis源码时记录的笔记,由于时间仓促和水平有限,文中难免会有错误之处,欢迎读者指出,共同学习进步,本文使用的Red ...

Android 开发之自定义Dialog及UI的实现

我们在开发中,经常会自定义Dialog,因为原生的AlertDialog无法满足我们的需求,这个时候就需要自定义Dialog,那么如何自定义呢,其实不难,就是有点繁琐而已.也就是自定义一个UI的xml ...

Python - Python2与Python3合理共存Windows平台

Install Python2 and Python3 Python 2.7.13 - Windows x86-64 MSI installer Python 3.6.0 - Windows x86- ...

【English】0321

Keep in mind记住[kip ɪn maɪnd] maintenance维护[ˈmentənəns] Also Keep in mind that table maintenance use ...

JavaAndroid开发部分API

JavaAndroid开发中的部分系统API 四大组件,都需要在清单文件中配置 Activity: 用来提供一个能让用户操作并与之交互的界面 onCreate(): 自动调用的方法, 在其中加载布局显 ...

Linux_CentOS-服务器搭建 <三> 补充

今天 才发现,服务器上 JDK 都没有好好的安装下.在这里补充说下. 1.看看机子上JDK的安装了多少 $ rpm -qa |grep java 会出现类似: java-1.6.0-openjdk-1 ...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。