昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果，直奔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. AE After Effect 渲染如何输出设置

    各种输出设置值的对比情况. Microsoft Video1压缩方法情况(该模式下无法采用RGB+Alpha): 一 深度为"数千种颜色",缩放为1280×720(HDV/HDTV ...

  2. 网卡bood

    一.网卡bood (1)网卡bond(绑定),也称作网卡捆绑.就是将两个或者更多的物理网卡绑定成一个虚拟网卡.网卡是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在应用部署 ...

  3. Python数据导入

    1.csv格式数据导入 import pandas as pd w=pd.read.csv("数据地址") w.describe() w.sort_values(by=" ...

  4. SQLServer IP不能登录问题解决

    最近项目项目需要,要在windows2008R2服务器上部署项目,可是客户那边服务器上SqlServer也没有安装,一切都要自己解决,所以我就找了个2008的版本,进行安装,安装过程没有遇到什么问题, ...

  5. 跨线程访问UI控件时的Lambda表达式

    工作中经常会用到跨线程访问UI控件的情况,由于.net本身机制,是不允许在非UI线程访问UI控件的,实际上跨线程访问UI控件还是 将访问UI的操作交给UI线程来处理的, 利用Control.Invok ...

  6. 用py文件调用操作系统的命名,粘包问题

    帅爆太阳的男人 1,执行代码 在py代码中去调用操作系统的命令 新的模块:subprocess, import subprocess r = subprocess().Popen( "dir ...

  7. 【bzoj2600】 [Ioi2011]ricehub

    如果发现尾指针到头指针这段稻田的中位数上建一个粮仓时距离之和超过了B 就调整尾指针对距离维护一个前缀和 每次取中位数之后可以O(1)计算距离和 #include<algorithm> #i ...

  8. QQ空间说说 视频播放

    http://182.254.8.83/vwecam.gtimg.com/1006_d81d60f3c83844a5ad6a184149d4ccbb.f0.mp4?sha=78A27CF4908AB5 ...

  9. ios20--xib2

    故事板控制器: // // ViewController.m // 03-通过xib自定义商品的View #import "ViewController.h" #import &q ...

  10. 用C语言实现websocket服务器

    Websocket Echo Server Demo 背景 嵌入式设备的应用开发大都依靠C语言来完成,我去研究如何用c语言实现websocket服务器也是为了在嵌入式设备中实现一个ip camera的 ...