半路独行

JQ完成表格单元格顺序的上移下调

如有指教及疑问,欢迎留言

 HTML代码

 1 <table class="exampletable">
 2         <thead>
 3             <tr>
 4                 <th>单元格</th>
 5                 <th>操作</th>
 6             </tr>
 7         </thead>
 8         <tbody>
 9             <tr>
10                 <td><input type="text" name="name" value="单元格一" /></td>
11                 <td>
12                     <button>上移</button>
13                     <button>下降</button>
14                 </td>
15             </tr>
16             <tr>
17                 <td><input type="text" name="name" value="单元格二" /></td>
18                 <td>
19                     <button>上移</button>
20                     <button>下降</button>
21                 </td>
22             </tr>
23             <tr>
24                 <td><input type="text" name="name" value="单元格三" /></td>
25                 <td>
26                     <button>上移</button>
27                     <button>下降</button>
28                 </td>
29             </tr>
30         </tbody>
31     </table>

JQ代码

1    $(".exampletable tbody").on('click', 'button', function () {
2             var $tr = $(this).closest('tr');
3             if ($(this).text()=="上移") {
4                 $tr.prev().before($tr);
5             } else {
6                 $tr.next().after($tr);
7             }
8         });

此代码没有考虑首单元格不能上移及尾单元格不能下调的问题.

 ps(纯凑字数):菜鸟一枚,今天专门为了这个问题搜了一会,发现,简单的问题往往被写的很复杂,代码本来就是追求简洁明了,不需要绕弯子,为何只需要举个简单的列子,加一些代码说明就可以解决的问题,却是在开篇的时候就用大堆的代码显示自己的厉害!以此为戒,今后的学习和笔记,力求简洁的代码,清晰地思路(均在能力之内)!

posted @ 2016-11-23 20:22  半路独行  阅读(640)  评论(1)  编辑  收藏  举报