table的数据行tr上下移动
来源:互联网 发布:mac英雄联盟美服网站 编辑:程序博客网 时间:2024/05/17 03:10
原文链接:http://www.cnblogs.com/taochen/articles/2344891.html
昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果,直奔google找了几个demo,发现demo是实现了效果,但是代码很多,最后还是决定自己用jquery写个吧,
首先将前端效果分析出编程逻辑,上下移动就是将数据行互换位置,互换为之前判断是否置顶或则最后一个,翻阅jquery文档发现insertBefore和insertAfter2个函数就可以解决问题,先看我实现的效果吧。
下图是表格初始状态:
点击上图第二行的“上移”后出现下图效果:
实现效果的JS代码:
<script type="text/javascript"> /* params t:触发事件的元素 oper:操作方式*/ function check(t,oper){ var data_tr=$(t).parent().parent(); //获取到触发的tr if(oper=="MoveUp"){ //向上移动 if($(data_tr).prev().html()==null){ //获取tr的前一个相同等级的元素是否为空 alert("已经是最顶部了!"); return; }{ $(data_tr).insertBefore($(data_tr).prev()); //将本身插入到目标tr的前面 } }else{ if($(data_tr).next().html()==null){ alert("已经是最低部了!"); return; }{ $(data_tr).insertAfter($(data_tr).next()); //将本身插入到目标tr的后面 } } }</script>
如需同步到数据库中,则在执行insertBefore和insertAfter之前$.ajax将当前的排序和目标数据的排序调换一下,将insertBefore和InsertBefore插入到success:function()中,
如果失败error:function(){alert("移动失败")}。
Html代码:
<style type="text/css"> table{border-collapse:collapse;} table th{width:100px;height:30px;text-align:center;} table td{width:100px;height:25px;text-align:center;font-size:14px;}</style></head><body><div><table> <thead> <tr> <th class="ui-widget-header">编号</th> <th class="ui-widget-header">姓名</th> <th class="ui-widget-header">年龄</th> <th class="ui-widget-header">住址</th> <th class="ui-widget-header">操作</th> </tr> </thead> <tbody> <tr> <td class="ui-widget-content">1</td> <td class="ui-widget-content">张三</td> <td class="ui-widget-content">21<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">湖南</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">2</td> <td class="ui-widget-content">李四</td> <td class="ui-widget-content">22<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">湖北</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">3</td> <td class="ui-widget-content">王五</td> <td class="ui-widget-content">34<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">河北</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">4</td> <td class="ui-widget-content">赵六</td> <td class="ui-widget-content">32<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">河南</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">5</td> <td class="ui-widget-content">田七</td> <td class="ui-widget-content">38<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">山东</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">6</td> <td class="ui-widget-content">戴久</td> <td class="ui-widget-content">65<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">北京</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">7</td> <td class="ui-widget-content">林十</td> <td class="ui-widget-content">45<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">新疆</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">8</td> <td class="ui-widget-content">陈坤</td> <td class="ui-widget-content">28<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">安徽</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">9</td> <td class="ui-widget-content">程斌</td> <td class="ui-widget-content">29<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">黑龙江</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> <tr> <td class="ui-widget-content">10</td> <td class="ui-widget-content">刘潇</td> <td class="ui-widget-content">25<input type="hidden" name="test" value="111" class="conids"/></td> <td class="ui-widget-content">西藏</td> <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td> </tr> </tbody></table>
用Jquery实现代码简便了许多,前段时间开始接触前台继续学习中,如有建议改进请提出你的宝贵意见。
0 0
- table的数据行tr上下移动
- table tr的上下移动
- html table tr td 上下移动行实例源代码
- jquery 控制table tr 上下移动
- js 上下键控制table里tr的背景上下移动选中效果
- table行的上移下移 上下移动
- jquery实现tr元素的上下移动
- jquery上下移动<tr>
- tr 上下移动
- jquery操作table 数据行拷贝,和上下移动
- Jquery 关于table整行上下移动的代码
- jquery实现tr元素的上下移动示例代码
- jQuery实现table中的tr上下移动并保持序号不变
- 实现table中tr、td的可移动效果
- DataGridView行的上下移动
- Table实现tr数据滚动
- 在table里动态获取tr里的所有数据
- js对table操作(增加删除交换上下TR)
- Linux---常用快捷键
- Centos网站服务器使用DropBox定时备份方案
- spring框架学习(五)注解
- Nginx + Lua + GraphicsMagick 实现切图服务
- JavaScript复习--点击显示登陆窗口(层)
- table的数据行tr上下移动
- javascript关于使用prototype给对象添加函数
- 快速排序
- 滤波器设计指标
- JSP 中 application,cookie,session 的区别
- GNU ARM汇编语法
- 【C++】关于指针函数
- 暴力法求解——简单枚举(除法)
- wp开发:Button按下后空白背景改变