jquery实现列表上下移动功能


Posted in Javascript onFebruary 25, 2016

废话少说,我们开始进入主题。
今天我们实现的是一个列表页面上移、下移功能。如图:

jquery实现列表上下移动功能

当勾选列表中的列时,点击上移或者下移,会动态上移或者下移。
html代码如下:

<div> 
  <input type="button" onclick="up();" value=" 上移 "> 
  <input type="button" onclick="down();" value=" 下移 "> 
</div> 
 <div> 
<table width="400px" height="200" class="mytable" cellpadding="5" cellspacing="0"> 
<tr> 
 <td>序号</td> 
 <td>名字</td> 
  <td>性别</td> 
</tr> 
 <tr> 
 <td><input type="checkbox" id="c1"/>1</td> 
 <td>小一</td> 
  <td>男</td> 
</tr> 
 <tr> 
 <td><input type="checkbox" id="c2"/>2</td> 
 <td>小二</td> 
  <td>女</td> 
</tr> 
<tr> 
 <td><input type="checkbox" id="c3"/>3</td> 
 <td>小三</td> 
  <td>女</td> 
</tr> 
</table> 
lt;/div>

我们定义一个css样式叫做mytable

.mytable td,.mytable{ 
 font-size:12px; 
 color:red; 
 border:1px solid #000; 
 text-align:center; 
 border-collapse:collapse; 
 }

然后实现up(),down()方法既可,代码如下:

$.each($("table input:checked"),function(){ 
  var onthis=$(this).parent().parent(); 
  var getUp=onthis.prev(); 
   
  if ($(getUp).has("input").size()==0) 
  { 
   alert("顶级元素不能上移"); 
   return; 
  } 
  $(onthis).after(getUp); 
 }); 
} 
 function down(){ 
 $.each($("table input:checked"),function(){ 
  var onthis=$(this).parent().parent(); 
  var getdown=onthis.next(); 
  $(getdown).after(onthis); 
 }); 
}

利用jquery提供的函数,实现很简单,当然如果想实现多列同时上移下移,只需要加一个循环既可,核心代码就是上边的。

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
给Function做的OOP扩展
May 07 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
js简单判断移动端系统的方法
Feb 25 #Javascript
jquery ztree实现树的搜索功能
Feb 25 #Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 #Javascript
JQuery ztree 异步加载实例讲解
Feb 25 #Javascript
Node.js编写组件的三种实现方式
Feb 25 #Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 #Javascript
你所未知的3种Node.js代码优化方式
Feb 25 #Javascript
You might like
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
javascript背投广告代码的完善
2008/04/08 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
js对象基础实例分析
2015/01/13 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python实现的简单万年历例子分享
2014/04/25 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Python类如何定义私有变量
2020/02/03 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
医学生求职自荐信
2013/10/25 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
我爱读书演讲稿
2014/05/07 职场文书
大学生学习计划书
2014/09/15 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
离职报告格式
2014/11/04 职场文书
防溺水主题班会教案
2015/08/12 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers