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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
js选项卡的制作方法
2017/01/23 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
python简单猜数游戏实例
2015/07/09 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python实现聊天小程序
2018/03/13 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
《放小鸟》教学反思
2014/04/20 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
高三复习计划
2015/01/19 职场文书
英文慰问信范文
2015/03/24 职场文书
父亲去世追悼词
2015/06/23 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android