table的数据行tr上下移动
昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果，直奔google找了几个demo，发现demo是实现了效果，但是代码很多，最后还是决定自己用jquery写个吧，
首先将前端效果分析出编程逻辑，上下移动就是将数据行互换位置，互换为之前判断是否置顶或则最后一个，翻阅jquery文档发现insertBefore和insertAfter2个函数就可以解决问题，先看我实现的效果吧。
下图是表格初始状态：
点击上图第二行的“上移”后出现下图效果:
实现效果的JS代码:
1 <script type="text/javascript"> 2 /* 3 params 4 t:触发事件的元素 5 oper:操作方式 6 */ 7 function check(t,oper){ 8 var data_tr=$(t).parent().parent(); //获取到触发的tr 9 if(oper=="MoveUp"){ //向上移动10 if($(data_tr).prev().html()==null){ //获取tr的前一个相同等级的元素是否为空11 alert("已经是最顶部了!");12 return;13 }{14 $(data_tr).insertBefore($(data_tr).prev()); //将本身插入到目标tr的前面 15 }16 }else{17 if($(data_tr).next().html()==null){18 alert("已经是最低部了!");19 return;20 }{21 $(data_tr).insertAfter($(data_tr).next()); //将本身插入到目标tr的后面 22 }23 }24 }25 </script>
如需同步到数据库中，则在执行insertBefore和insertAfter之前$.ajax将当前的排序和目标数据的排序调换一下，将insertBefore和InsertBefore插入到success:function()中，
如果失败error:function(){alert("移动失败")}。
Html代码:
1 <style type="text/css"> 2 table{border-collapse:collapse;} 3 table th{width:100px;height:30px;text-align:center;} 4 table td{width:100px;height:25px;text-align:center;font-size:14px;} 5 </style> 6 </head> 7 8 <body> 9 <div>10 <table>11 <thead>12 <tr>13 <th class="ui-widget-header">编号</th>14 <th class="ui-widget-header">姓名</th>15 <th class="ui-widget-header">年龄</th>16 <th class="ui-widget-header">住址</th>17 <th class="ui-widget-header">操作</th>18 </tr>19 </thead>20 <tbody>21 <tr>22 <td class="ui-widget-content">1</td>23 <td class="ui-widget-content">张三</td>24 <td class="ui-widget-content">21<input type="hidden" name="test" value="111" class="conids"/></td>25 <td class="ui-widget-content">湖南</td>26 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>27 </tr>28 <tr>29 <td class="ui-widget-content">2</td>30 <td class="ui-widget-content">李四</td>31 <td class="ui-widget-content">22<input type="hidden" name="test" value="111" class="conids"/></td>32 <td class="ui-widget-content">湖北</td>33 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>34 </tr>35 <tr>36 <td class="ui-widget-content">3</td>37 <td class="ui-widget-content">王五</td>38 <td class="ui-widget-content">34<input type="hidden" name="test" value="111" class="conids"/></td>39 <td class="ui-widget-content">河北</td>40 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>41 </tr>42 <tr>43 <td class="ui-widget-content">4</td>44 <td class="ui-widget-content">赵六</td>45 <td class="ui-widget-content">32<input type="hidden" name="test" value="111" class="conids"/></td>46 <td class="ui-widget-content">河南</td>47 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>48 </tr>49 <tr>50 <td class="ui-widget-content">5</td>51 <td class="ui-widget-content">田七</td>52 <td class="ui-widget-content">38<input type="hidden" name="test" value="111" class="conids"/></td>53 <td class="ui-widget-content">山东</td>54 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>55 </tr>56 <tr>57 <td class="ui-widget-content">6</td>58 <td class="ui-widget-content">戴久</td>59 <td class="ui-widget-content">65<input type="hidden" name="test" value="111" class="conids"/></td>60 <td class="ui-widget-content">北京</td>61 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>62 </tr>63 <tr>64 <td class="ui-widget-content">7</td>65 <td class="ui-widget-content">林十</td>66 <td class="ui-widget-content">45<input type="hidden" name="test" value="111" class="conids"/></td>67 <td class="ui-widget-content">新疆</td>68 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>69 </tr>70 <tr>71 <td class="ui-widget-content">8</td>72 <td class="ui-widget-content">陈坤</td>73 <td class="ui-widget-content">28<input type="hidden" name="test" value="111" class="conids"/></td>74 <td class="ui-widget-content">安徽</td>75 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>76 </tr>77 <tr>78 <td class="ui-widget-content">9</td>79 <td class="ui-widget-content">程斌</td>80 <td class="ui-widget-content">29<input type="hidden" name="test" value="111" class="conids"/></td>81 <td class="ui-widget-content">黑龙江</td>82 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>83 </tr>84 <tr>85 <td class="ui-widget-content">10</td>86 <td class="ui-widget-content">刘潇</td>87 <td class="ui-widget-content">25<input type="hidden" name="test" value="111" class="conids"/></td>88 <td class="ui-widget-content">西藏</td>89 <td class="ui-widget-content"><a href="#" onclick="check(this,'MoveUp')">上移</a> <a href="#" onclick="check(this,'MoveDown')">下移</a></td>90 </tr>91 </tbody>92 </table>用Jquery实现代码简便了许多，前段时间开始接触前台继续学习中，如有建议改进请提出你的宝贵意见。
table的数据行tr上下移动的更多相关文章
- JS实现页面table鼠标移动改变tr行颜色，单击tr选中复选框功能
JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- Table标题行冻结，数据行滚动的一种方式
这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来. 首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离.我是这么做的,用两个表格,一个只有 ...
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- View中选择的数据行中的部分数据传入到Controller中
将View中选择的数据行中的部分数据传入到Controller中 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NE ...
- Saiku Table展示数据合并bug修复（二十五）
Saiku Table展示数据合并bug修复 Saiku以table的形式展示数据,如果点击了 非空的字段 按钮,则会自动进行数据合并,为空的数据行以及数据列都会自动隐藏掉. 首先我们应该定位问题: ...
- 按照勾选 删除表格的行<tr>
需求描述:有一个产品列表,有一个删减按钮,点击删减按钮,按照产品勾选的行,删除产品列表中对应的行数据 代码: //html代码<table id="table1"> & ...
- 【JavaScript】checkBox的多选行<tr>信息获取
页面的列表table显示(后台model.addAttribute("page", page);传来page信息,page通过foreach标签迭代展示表格数据): <!-- ...
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
随机推荐
- Jenkins performance插件生成性能测试报告【待完成】
https://segmentfault.com/a/1190000018651092 本地window运行 命令执行:F:\study\apache-jmeter-4.0\apache-jmeter ...
- android菜鸟之路-事件分发机制总结(二)
ViewGroup事件分发机制 自己定义一个LinearLayout,ImageView和Button,小二,上代码 <LinearLayout xmlns:android="http ...
- Glide 图片形状裁剪 ，滤镜等
Glide . Picasso . Fresco 已逐渐成为Android主流的图片加载工具(个人见解,使用Volley.ImageLoader.xUtils的大佬们请勿喷~),在多数Android程 ...
- SPOJ OTOCI 动态树 LCT
SPOJ OTOCI 裸的动态树问题. 回顾一下我们对树的认识. 最初,它是一个连通的无向的无环的图,然后我们发现由一个根出发进行BFS 会出现层次分明的树状图形. 然后根据树的递归和层次性质,我们得 ...
- linux shell 实例1
UI项目删除“UIL”文件中的无用字串: 脚本需要制定UIL文件目录位置&无用字串的txt文件,如删除海尔目录下的无用字串: ./delete_uil_string.sh ./haier/UI ...
- Java IO 字节流与字符流 （二）
1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序 ...
- 移动端html touch事件
诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互.随着移动网络的发展,其能够支持越来越复杂的应用,web开 ...
- 安装Git（转载）
转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703 ...
- 微信H5页面 - 调酒
这是微信H5的一款小游戏(一款酒的推广活动),主要游戏页面如下: 游戏规则: 点击选择2个元素(圈圈图片),放入瓶中,使它们与瓶中已有的三个元素碰撞,调配佳酿. 只有选择正确的2个元素搭配,才可以调配 ...
- codehunter 「Adera 6」杯省选模拟赛 网络升级 【树形dp】
直接抄ppt好了--来自lyd 注意只用对根判断是否哟留下儿子 #include<iostream> #include<cstdio> using namespace std; ...