脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery表格行拖动排序

jquery实现表格行拖动排序

 更新时间：2022年02月22日 11:35:31   作者：hehuijava  
这篇文章主要为大家详细介绍了jquery实现表格行拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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" style="margin-top: 10px;border-color: #dddddd;border-style: solid;">
    <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>

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论