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平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jquery插件懒加载的示例
Oct 24 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
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python性能优化的20条建议
2014/10/25 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python 系统调用的实例详解
2017/07/11 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
flask入门之表单的实现
2018/07/18 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
为什么说python适合写爬虫
2020/06/11 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
JAVA招聘远程笔试题
2015/07/23 面试题
《老王》教学反思
2014/02/23 职场文书
森林防火标语
2014/06/23 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技