表格上下行移動(dòng)如何實(shí)現(xiàn)？

圖片描述

請(qǐng)問(wèn)表格行上下移動(dòng)的效果應(yīng)該如何實(shí)現(xiàn)？或者有什么插件方便實(shí)現(xiàn)。

回答

編輯回答

氕氘氚

Sortable.js是一款輕量級(jí)的拖放排序列表的js插件（雖然體積小，但是功能很強(qiáng)大）
下載地址：https://github.com/RubaXa/Sor...
官方DEMO：http://rubaxa.github.io/Sorta...

2018年3月19日 09:41

編輯回答

厭惡我

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        function moveUp(obj) {
            var current = $(obj).parent().parent();
            var prev=current.prev();
            if(current.index()>1) {
                current.insertBefore(prev);
            }
        }
        function moveDown(obj) {
            var current = $(obj).parent().parent();
            var next = current.next();
            if(next) {
                current.insertAfter(next);
            }
        }
    </script>
</head>
<body>
<table class="grid" width="100%" border="1" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>字段英文名</td>
            <td>字段中文名</td>
            <td>字段數(shù)據(jù)類(lèi)型</td>
            <td>列寬</td>
            <td>是否顯示</td>
            <td>是否作為查詢(xún)條件</td>
            <td>調(diào)整順序</td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <a href="javascript:void(0)" onclick="moveUp(this)">上移</a>
                <a href="javascript:void(0)" onclick="moveDown(this)">下移</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <a href="javascript:void(0)" onclick="moveUp(this)">上移</a>
                <a href="javascript:void(0)" onclick="moveDown(this)">下移</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <a href="javascript:void(0)" onclick="moveUp(this)">上移</a>
                <a href="javascript:void(0)" onclick="moveDown(this)">下移</a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <a href="javascript:void(0)" onclick="moveUp(this)">上移</a>
                <a href="javascript:void(0)" onclick="moveDown(this)">下移</a>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

2018年1月13日 22:30