JQuery实现table中tr上移下移
2018-01-03 17:27
232 查看
表格样式
<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实现动态添加tr到table的方法
- jQuery实现table中的tr上下移动并保持序号不变
- JQuery:实现table的排序(tr)
- jquery遍历table的tr获取td的值实现方法
- jQuery实现动态添加tr到table的方法
- jquery遍历table的tr获取td的值实现方法
- (原创)简单 jQuery 插件让 Table 中的 Tr 实现光棒效果
- jquery 实现点击 table中一行tr自动复制本行添加到本行之后 点击按钮回复到初始状态
- Jquery 实现html table 行 Tr 的复制 . table追加 消除
- jquery实现checkbox全选,选择性勾选,以及table中点击tr中任意一行实现选中或不选中
- jQuery实现table中的tr上下移动并保持序号不变的实例代码
- jquery遍历table的tr获取td的值实现方法
- jquery实现递归table-tr
- jquery遍历table的tr获取td的值实现方法
- angularjs实现table增加tr
- jquery 实现鼠标移动到table每行,此行高亮变色
- Jquery实现鼠标双击Table单元格变成文本框
- jquery实现tr元素的上下移动示例代码
- table表头和首列的表格固定-JQuery、js实现的Table表头固定