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代码:
View Code
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实现代码简便了许多，前段时间开始接触前台继续学习中，如有建议改进请提出你的宝贵意见。
