昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果，直奔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. console command

    routes/console.php copy一个默认的 Artisan::command('hello', function () { $this->comment('hello world' ...

  2. Python学习系列之异常处理

    什么是异常处理 python内置了一套try···except···finally的错误处理机制 当程序出错的时候进行捕捉,然后根据捕捉到的错误信息进行响相应的处理 常用的内建异常 初识异常处理 如例 ...

  3. Angular CLI: 1.6.7 入门

    当你使用npm或者yarn也安装不了angular-cli时,请使用淘宝镜像. Step1 npm i -g cnpm --registry=https://registry.npm.taobao.o ...

  4. 利用vue-cli配合vue-router搭建一个完整的spa流程

    好文章备忘录: 转自:https://segmentfault.com/a/1190000009160934?_ea=1849098 demo源码:https://github.com/1590123 ...

  5. SpringMVC 学习笔记(五) 基于RESTful的CRUD

    1.1. 概述 当提交的表单带有_method字段时,通过HiddenHttpMethodFilter 将 POST 请求转换成 DELETE.PUT请求,加上@PathVariable注解从而实现  ...

  6. 单点登录之CAS简介

    cas官网http://www.ja-sig.org/products/cas/. ok,如今開始本文的重点内容解说,先来了解一下cas 实现single sign out的原理,如图所看到的:    ...

  7. 【bzoj3609】[Heoi2014]人人尽说江南好

    可以算出合并多少次. #include<algorithm> #include<iostream> #include<cstdlib> #include<cs ...

  8. ATM网络

    ATM是Asynchronous Transfer Mode(ATM)异步传输模式的缩写,是实现B-ISDN的业务的核心技术之一.ATM是以信元为基础的一种分组交换和复用技术

  9. xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is

    method: select Xcode version in Command Line Tools in Location(Click Xcode and then Preferences) Bef ...

  10. Java 相关计数问题及其实现

    数(三声)数(四声)问题自然使用非负整数: 0. 一个类作为一个计数器 java 语法 -- final class Counter { private static long counter; pr ...