JQuery实现table中tr上移下移的示例(超简单)
更新时间：2018年01月08日 14:44:06 作者：一包大豫竹
下面小编就为大家分享一篇JQuery实现table中tr上移下移的示例(超简单)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
表格样式
<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监听input输入框值变化实例内容，需要的朋友们学习下。2019-10-10
这篇文章主要介绍了jQuery动态改变多行文本框高度的方法,结合实例形式分析了jQuery响应鼠标事件动态修改页面元素属性的相关技巧,需要的朋友可以参考下2016-09-09
本篇文章主要介绍了jquery easyui如何实现格式化列 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章介绍了jquery实现的文字淡入淡出效果实例，有需要的朋友可以参考一下2013-11-11
依据className实现的Tab选项框，支持多个tab，需要的朋友可以参考下。2011-03-03
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
下面小编就为大家带来一篇jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
JQuery具有强大的解析数据的能力，本文详细介绍HTML、JSON和XML格式的文件的数据如何解析2014-03-03
这篇文章主要介绍了JQuery中节点遍历方法,实例分析了jQuery遍历节点的技巧,需要的朋友可以参考下2015-05-05
如果有对象A ，B 现在我想要合并成对象C 从C里面可以找到A , B 及其子对象 怎么做2012-10-10
jQuery插件easyUI实现通过JS显示Dialog的方法
这篇文章主要介绍了jQuery插件easyUI实现通过JS显示Dialog的方法,实例分析了jQuery插件easyUI弹出Dialog的具体实现技巧,需要的朋友可以参考下2016-09-09
最新评论