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

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

HTML代码

 <table class="exampletable">
         <thead>
             <tr>
                 <th>单元格</th>
                 <th>操作</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td><input type="text" name="name" value="单元格一" /></td>
                 <td>
                     <button>上移</button>
                     <button>下降</button>
                 </td>
             </tr>
             <tr>
                 <td><input type="text" name="name" value="单元格二" /></td>
                 <td>
                     <button>上移</button>
                     <button>下降</button>
                 </td>
             </tr>
             <tr>
                 <td><input type="text" name="name" value="单元格三" /></td>
                 <td>
                     <button>上移</button>
                     <button>下降</button>
                 </td>
             </tr>
         </tbody>
     </table>

JQ代码

    $(".exampletable tbody").on('click', 'button', function () {
             var $tr = $(this).closest('tr');
             if ($(this).text()=="上移") {
                 $tr.prev().before($tr);
             } else {
                 $tr.next().after($tr);
             }
         });

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

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