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