昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果，直奔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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="#" onclick="check(this,'MoveDown')">下移</a></td>90     </tr>91   </tbody>92 </table>用Jquery实现代码简便了许多，前段时间开始接触前台继续学习中，如有建议改进请提出你的宝贵意见。

table的数据行tr上下移动的更多相关文章

  1. JS实现页面table鼠标移动改变tr行颜色，单击tr选中复选框功能

    JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...

  2. html中table表格标题固定表数据行出现滚动条

    需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...

  3. Table标题行冻结，数据行滚动的一种方式

    这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来. 首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离.我是这么做的,用两个表格,一个只有 ...

  4. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  5. View中选择的数据行中的部分数据传入到Controller中

    将View中选择的数据行中的部分数据传入到Controller中   ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NE ...

  6. Saiku Table展示数据合并bug修复（二十五）

    Saiku Table展示数据合并bug修复 Saiku以table的形式展示数据,如果点击了 非空的字段 按钮,则会自动进行数据合并,为空的数据行以及数据列都会自动隐藏掉. 首先我们应该定位问题: ...

  7. 按照勾选 删除表格的行<tr>

    需求描述:有一个产品列表,有一个删减按钮,点击删减按钮,按照产品勾选的行,删除产品列表中对应的行数据 代码: //html代码<table id="table1"> & ...

  8. 【JavaScript】checkBox的多选行<tr>信息获取

    页面的列表table显示(后台model.addAttribute("page", page);传来page信息,page通过foreach标签迭代展示表格数据): <!-- ...

  9. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

随机推荐

  1. label显示不同颜色的字体

    NSString *contentSrt = [NSString stringWithFormat:@"%@ (%@)",categoryModel.categoryName, c ...

  2. nodejs参考文章

    http://www.cnblogs.com/lily1010/p/6683987.html https://manlili.github.io/2015/04/06/Node%E5%85%A5%E9 ...

  3. hdu 4778 Gems Fight!

    第一次写状压dp-- 题意:http://blog.csdn.net/dyx404514/article/details/15506601 状压dp+博弈吧-- #include<iostrea ...

  4. Android 获取手机SIM卡运营商

    直接上代码: /** * 获取SIM卡运营商 * * @param context * @return */ public static String getOperators(Context con ...

  5. 树状数组 LA 4329 亚洲赛北京赛区题

    复习下树状数组 还是蛮有意思的一道题: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&cat ...

  6. VC++ 模拟&quot;CLICK事件&quot;关闭指定窗体

    今天改动一个工具时遇到一个有意思的问题,打开某个窗体时弹出一些不相关的窗体.须要用户自己去手动点击后才干继续.保证不了自己主动处理,如今解说决方案记录一下,例如以下 主要使用windows提供的Fin ...

  7. Windows 点击 模拟

    点击模拟  安卓模拟器  爬虫

  8. 编译android的一些坑

    1 降级gcc g++到4.4 2 参考:http://source.android.com/source/initializing.html来配置环境 3 使用jdk1.6 包括 java java ...

  9. Resharper 实现接口的方式

  10. Oracle创建表语句(Create table)语法详解及示例、、 C# 调用Oracle 存储过程返回数据集 实例

    Oracle创建表语句(Create table)语法详解及示例 2010-06-28 13:59:13|  分类: Oracle PL/SQL|字号 订阅 创建表(Create table)语法详解 ...