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插件之validation插件
Mar 29 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现计算器功能
Oct 19 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防注入,表单提交值转义的实现详解
2013/06/10 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
jQuery之Deferred对象详解
2014/09/04 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
bpython 功能强大的Python shell
2016/02/16 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python定时截屏实现
2020/11/02 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
巴西购物网站:Estrela10
2018/12/13 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
临床护士自荐信
2014/01/31 职场文书
个人函授自我鉴定
2014/03/25 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
长城导游词300字
2015/01/30 职场文书
会计工作岗位职责
2015/02/03 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang