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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
移动节点的jquery代码
Jan 13 Javascript
js子页面获取父页面数据示例
May 15 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
php.ini 中文版
2006/10/28 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
vue路由--网站导航功能详解
2019/03/29 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
ant design实现圈选功能
2019/12/17 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
使用python分析git log日志示例
2014/02/27 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
python如何修改文件时间属性
2021/02/05 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
花坛标语大全
2014/06/30 职场文书
学校教研活动总结
2014/07/02 职场文书
ktv好的活动方案
2014/08/15 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书