jquery如何实现表格行拖动排序

发布时间：2022-02-22 13:41:44 阅读：246 作者：小新栏目：开发技术

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章主要介绍了jquery如何实现表格行拖动排序，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体内容如下

引入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>序号</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>