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 相关文章推荐
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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的宝库目录--PEAR
2006/10/09 PHP
基于php判断客户端类型
2016/10/14 PHP
PHP学习笔记之session
2018/05/06 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python中itertools的用法详解
2020/02/07 Python
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
门店店长岗位职责
2015/04/14 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js