table的数据行tr上下移动-白红宇

table的数据行tr上下移动

阅读量：6092 次

发布时间：2019-06-20

本文共 2607 字，大约阅读时间需要 8 分钟。

　　昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果，直奔google找了几个demo，发现demo是实现了效果，但是代码很多，最后还是决定自己用jquery写个吧，

首先将前端效果分析出编程逻辑，上下移动就是将数据行互换位置，互换为之前判断是否置顶或则最后一个，翻阅jquery文档发现insertBefore和insertAfter2个函数就可以解决问题，先看我实现的效果吧。

下图是表格初始状态：

　　点击上图第二行的“上移”后出现下图效果:

实现效果的JS代码:

如需同步到数据库中，则在执行insertBefore和insertAfter之前$.ajax将当前的排序和目标数据的排序调换一下，将insertBefore和InsertBefore插入到success:function()中，

如果失败error:function(){alert("移动失败")}。

Html代码:

View Code

1   6   7  8   9 
      
        10 
       
         11     
          12         
           13             
 14             
 15             
 16             
 17             
 18         
 19     
 20     
          21     
           22             
 23         
 24         
 25         
 26         
 27     
 28      
           29          
 30         
 31         
 32         
 33         
 34     
 35      
           36          
 37         
 38         
 39         
 40         
 41     
 42      
           43          
 44         
 45         
 46         
 47         
 48     
 49      
           50          
 51         
 52         
 53         
 54         
 55     
 56      
           57          
 58         
 59         
 60         
 61         
 62     
 63      
           64          
 65         
 66         
 67         
 68         
 69     
 70      
           71          
 72         
 73         
 74         
 75         
 76     
 77      
           78          
 79         
 80         
 81         
 82         
 83     
 84      
           85          
 86         
 87         
 88         
 89         
 90     
 91   
 92 
                           编号           姓名           年龄           住址           操作          
        
                           1           张三           21           湖南           上移  下移          
                   2           李四           22           湖北           上移  下移          
                   3           王五           34           河北           上移  下移          
                   4           赵六           32           河南           上移  下移          
                   5           田七           38           山东           上移  下移          
                   6           戴久           65           北京           上移  下移          
                   7           林十           45           新疆           上移  下移          
                   8           陈坤           28           安徽           上移  下移          
                   9           程斌           29           黑龙江           上移  下移          
                   10           刘潇           25           西藏           上移  下移

编号	姓名	年龄	住址	操作
1	张三	21	湖南	上移下移
2	李四	22	湖北	上移下移
3	王五	34	河北	上移下移
4	赵六	32	河南	上移下移
5	田七	38	山东	上移下移
6	戴久	65	北京	上移下移
7	林十	45	新疆	上移下移
8	陈坤	28	安徽	上移下移
9	程斌	29	黑龙江	上移下移
10	刘潇	25	西藏	上移下移

用Jquery实现代码简便了许多，前段时间开始接触前台继续学习中，如有建议改进请提出你的宝贵意见。

转载于:https://www.cnblogs.com/taochen/articles/2344891.html

你可能感兴趣的文章