JQuery实现table中tr上移下移的示例(超简单)
2018-01-08 14:44
239 查看
<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实现table中tr上移下移
- (原创)简单 jQuery 插件让 Table 中的 Tr 实现光棒效果
- jquery 实现点击 table中一行tr自动复制本行添加到本行之后 点击按钮回复到初始状态
- jQuery简单实现页面元素置顶时悬浮效果示例
- DataTable 递归 简单的程序,来实现无限级列表 结合 jquery.table.js 实现
- jQuery实现动态添加tr到table的方法
- jquery+ajax实现省市区三级联动效果简单示例
- jQuery实现table中两列CheckBox只能选中一个的示例
- jQuery实现简单的下拉菜单导航功能示例
- jQuery实现的简单分页示例
- jQuery实现简单的网页换肤效果示例
- js实现table添加行tr、删除行tr、清空行tr的简单实例
- jQuery实现动态添加tr到table的方法
- jQuery超简单遮罩层实现方法示例
- jQuery实现table中的tr上下移动并保持序号不变
- jQuery实现的简单对话框拖动功能示例
- jQuery实现的简单前端搜索功能示例
- jQuery实现简单的回到顶部totop功能示例
- jquery实现checkbox全选,选择性勾选,以及table中点击tr中任意一行实现选中或不选中
- jQuery实现简单日期格式化功能示例