table---改变列的顺序

最新推荐文章于 2023-10-09 09:49:31 发布

原创最新推荐文章于 2023-10-09 09:49:31 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

html 同时被 2 个专栏收录

1 篇文章

订阅专栏

table

1 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery库来实现对HTML表格中列的重新排序，为前端开发者提供了一种简便的方法来动态调整表格布局。

基于jQuery写的改变表格列的顺序

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title> demo </title>
    <style>
        .no-select-text {
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
        }
        #headTable td {
            border-bottom: 0px;
            cursor: all-scroll;
        }
         #mainTable td {
            width: 77px;
            border-top: 0px;
        }
    </style>

</head>

<body>
    <div id="main">
        <table id="headTable" border="1" cellpadding="0" cellspacing="0" style="width:400px;text-align:center;">
            <tr style="background-color: #E5E5E5">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
        <table id="mainTable" border="1" cellpadding="0" cellspacing="0" style="width:400px;text-align:center;">
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td><div style="color:red;">ten<span style="display:none">123</span></div>10</td>
            </tr>
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td><div style="color:red;">ten<span style="display:none">123</span></div>10</td>
            </tr>
            <tr>
                <td>61</td>
                <td>71</td>
                <td>81</td>
                <td>91</td>
                <td><div style="color:red;">ten<span style="display:none">123</span></div>101</td>
            </tr>
        </table>
        
    </div>
</body>
</html> 
<script src="lib/jquery.min.js"></script>

<script>
	
    var h = $('#headTable td').height();
    $('.arrow-up').css({
        'margin-top':h
    });

    var flag = false;
    $('#headTable td').unbind("mousedown");
    $('#headTable td').mousedown(function () {
        let startIndex = $(this).index();
        let endIndex;
        flag = true;
        $('#info').css({
            display: 'block'
        });
        //$('#triangle').css('display', 'block');
        $('body').addClass('no-select-text');
        $('#info').html($(this).html());
        $(document).mousemove(function (e) {
            if (flag) {
                var e = e || window.event;
                var x = e.clientX + 5 + 'px';
                var y = e.clientY + 5 + 'px';
                $('#info').css({
                    left: x,
                    top: y
                });
                if (e.preventDefault) {
                    e.preventDefault();
                }
                return false;
            }
            
        });
        
        $('table td').mouseenter(function () {
            endIndex = $(this).index();
            if (endIndex == startIndex) {
                $('#triangle').css('display', 'none');
            } else {
                $('#triangle').css('display', 'block');
            }
            var offsetW = 0;
            var preTd = $(this).prevAll();
            $.each(preTd, function (id, item) {
                offsetW += item.offsetWidth;
            })
            if (endIndex > startIndex) {
                offsetW += $(this)["0"].offsetWidth;
            }
            $('#triangle').css({
                'top': 0,
                'left': offsetW + 4
            });
        });
        $(document).mouseup(function () {
            flag = false;
            $('#triangle').css('display', 'none');
            $('#info').css({
                display:'none'
            });
            if (endIndex < startIndex) {
                $("#mainTable tr").each(function (i) {
                    $('#mainTable tr:eq(' + i + ') td:eq(' + endIndex + ')').before($('#mainTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
                    $('#mainTable tr:eq(' + i + ') td:eq(' + (startIndex + 1) + ')').remove();
                    $('#headTable tr:eq(' + i + ') td:eq(' + endIndex + ')').before($('#headTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
                    $('#headTable tr:eq(' + i + ') td:eq(' + (startIndex + 1) + ')').remove();
                });
                
            } else if (endIndex > startIndex) {
                $("#mainTable tr").each(function (i) {
                    $('#mainTable tr:eq(' + i + ') td:eq(' + endIndex + ')').after($('#mainTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
                    $('#mainTable tr:eq(' + i + ') td:eq(' + (startIndex) + ')').remove();
                    $('#headTable tr:eq(' + i + ') td:eq(' + endIndex + ')').after($('#headTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
                    $('#headTable tr:eq(' + i + ') td:eq(' + (startIndex) + ')').remove();
                });
                
            }
            $(document).unbind("mousemove");
            $(document).unbind("mouseup");
            $('table td').unbind("mouseenter");
        });
        
    });
</script>