JQuery实现table中tr上移下移的示例(超简单)


Posted in jQuery onJanuary 08, 2018

表格样式

<table>
  <tr>
    <td><input  type="button" value="上移" onclick="moveUp(this)"/></td>
    <td><input  type="button" value="下移" onclick="moveDown(this)"/></td>
  </tr>
  <tr>
    <td><input  type="button" value="上移" onclick="moveUp(this)"/></td>
    <td><input  type="button" value="下移" onclick="moveDown(this)"/></td>
  </tr>
    <tr>
    <td><input  type="button" value="上移" onclick="moveUp(this)"/></td>
    <td><input  type="button" value="下移" onclick="moveDown(this)"/></td>
  </tr>
</table>

js代码

// 上移 
function moveUp(obj) { 
  var current = $(obj).parent().parent(); //获取当前<tr>
  var prev = current.prev();  //获取当前<tr>前一个元素
  if (current.index() > 0) { 
    current.insertBefore(prev); //插入到当前<tr>前一个元素前
  } 
} 
// 下移 
function moveDown(obj) { 
  var current = $(obj).parent().parent(); //获取当前<tr>
  var next = current.next(); //获取当前<tr>后面一个元素
  if (next) { 
    current.insertAfter(next);  //插入到当前<tr>后面一个元素后面
  } 
}

以上这篇JQuery实现table中tr上移下移的示例(超简单)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 #jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
jQuery中库的引用方法
Jan 06 #jQuery
jQuery封装animate.css的实例
Jan 04 #jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
You might like
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
用C++封装MySQL的API的教程
2015/05/06 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
孔繁森观后感
2015/06/10 职场文书
党员身份证明材料
2015/06/19 职场文书
公司处罚决定书
2015/06/24 职场文书
《确定位置》教学反思
2016/02/18 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技