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中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
如何快速上手Vuex
Feb 14 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 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
laravel安装和配置教程
2014/10/29 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
使用flow来规范javascript的变量类型
2019/09/12 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
金融学专科生自我鉴定
2014/02/21 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
中学生家长评语大全
2014/04/16 职场文书
贷款委托书
2014/08/01 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
2016年党建工作简报
2015/11/26 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android