使用jQuery和jQuery UI拖动table中的tr元素，改变tr元素的顺序

LEETOON

于 2018-08-25 23:35:17 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery 拖动table中的tr元素改变tr元素的顺序 jQuery UI

本文链接：https://blog.youkuaiyun.com/litong149/article/details/82056316

jQuery 专栏收录该内容

4 篇文章

订阅专栏

博客指出使用table制作目录或显示数据时，会有调整顺序的需求。介绍了使用jQuery和jQuery UI框架中的函数，通过鼠标拖动tr元素来改变其顺序，还提及代码中主要使用的函数及参数，以及事件回调函数的参数等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用table制作目录时，会遇到调整目录顺序的问题；

或者在使用table显示数据时，通过改变table中数据的顺序，使得两条不相邻的数据相邻，对比数据信息。

那么，通过什么方法，能够拖动table中tr元素呢？

本文使用jQuery和jquery UI框架中的函数，通过鼠标拖动tr，改变tr的顺序。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>table拖拽</title>
    <style>
    tr {
        cursor: pointer;
    }

    td {
        padding: 5px 10px;
    }
    </style>
    <script type="text/javascript" src="../jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../jquery-ui.js"></script>
</head>

<body>
    <table id="sort">
        <thead>
            <tr>
                <th class="index">序号</th>
                <th class="year">年份</th>
                <th>标题</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="index">1</td>
                <td class="year">2011</td>
                <td>第一行</td>
                <td>红发---红发</td>
            </tr>
            <tr>
                <td class="index">2</td>
                <td class="year">2012</td>
                <td>第二行</td>
                <td>多夫朗明哥</td>
            </tr>
            <tr>
                <td class="index">3</td>
                <td class="year">2013</td>
                <td>第三行</td>
                <td>甚平---甚平</td>
            </tr>
            <tr>
                <td class="index">4</td>
                <td class="year">2014</td>
                <td>第四行</td>
                <td>鹰眼---鹰眼</td>
            </tr>
        </tbody>
    </table>
    <script>
    $(document).ready(function() {
        var fixHelperModified = function(e, tr) {
                //children() 方法返回返回被选元素的所有直接子元素
                var $originals = tr.children();
                //clone() 方法生成被选元素的副本，包含子节点、文本和属性
                var $helper = tr.clone();
                //each() 方法规定为每个匹配元素规定运行的函数
                $helper.children().each(function(index) {
                    //width() 方法返回或设置匹配元素的宽度
                    //eq() 方法将匹配元素集缩减值指定 index 上的一个
                    $(this).width($originals.eq(index).width())
                });
                return $helper;
            },
            updateIndex = function(e, ui) {
                //ui.item - 表示当前拖拽的元素 
                //parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的
                $('td.index', ui.item.parent()).each(function(i) {
                    //html() 方法返回或设置被选元素的内容 (inner HTML)
                    $(this).html(i + 1);
                });
            };
        $("#sort tbody").sortable({
            //设置是否在拖拽元素时，显示一个辅助的元素。可选值：'original', 'clone' 
            helper: fixHelperModified,
            //当排序动作结束时触发此事件。 
            stop: updateIndex
        }).disableSelection();
    });
    </script>
</body>

</html>

代码中主要使用两个函数 $("selector").sortable().disableSelection(),helper和stop为sortable函数中的参数。