jquery如何實(shí)現(xiàn)表格行拖動(dòng)排序

發(fā)布時(shí)間：2022-02-22 13:41:44 來(lái)源：億速云閱讀：229 作者：小新欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹了jquery如何實(shí)現(xiàn)表格行拖動(dòng)排序，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(nèi)容如下

引入JS

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

html代碼

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>sortDemo</title>
    <script src="jquery.min.js"></script>
    <script src="jquery-ui.min.js"></script>

</head>
<body>

<table id="dataTable" border="1" cellpadding="6" cellspacing="0" align="center" >
    <thead>
        <tr>
            <th>序號(hào)</th>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>張三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>25</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>16</td>
        </tr>
        <tr>
            <td>4</td>
            <td>趙六</td>
            <td>30</td>
        </tr>
        <tr>
            <td>5</td>
            <td>田七</td>
            <td>20</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(function() {
        var fixHelper = function(e, ui) {
            ui.children().each(function() {
                $(this).width($(this).width());
            });
            return ui;
        };

        $("#dataTable tbody").sortable({
            cursor: "move",
            helper: fixHelper,
            axis:"y",
            start:function(e, ui){
                ui.helper.css({"background":"#fff"});
                return ui;
            }
        });
        $( "#sortable" ).disableSelection();
    });

</script>
</body>
</html>

效果

jquery如何實(shí)現(xiàn)表格行拖動(dòng)排序

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jquery如何實(shí)現(xiàn)表格行拖動(dòng)排序”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

jquery如何實(shí)現(xiàn)表格行拖動(dòng)排序

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽