jquery實現拖拽table表頭改變列寬

本文實例為大傢分享瞭jquery實現拖拽table表頭改變列寬的具體代碼,供大傢參考,具體內容如下

效果:

直接上代碼,有註釋:

<!DOCTYPE html>
<html>
<head>
    <style>
        table, td, th {
            border: 1px solid #ddd;
            text-align: left;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }

        th, td {
            padding: 5px;
            position: relative;
            user-select: none;
            /*text-overflow: ellipsis;*/
            word-break: break-all;
        }

        .th-sisehandler {
            position: absolute;
            right: -0.5px;
            top: 0;
            z-index: 1;
            width: 5px;
            height: 100%;
            padding-left: 4px;
            cursor: col-resize;
        }

        .th-sisehandler::after {
            content: '';
            display: block;
            width: 10px;
            background-color: #4CAF50; /*演示為瞭看效果加上的,可以去掉*/
            height: 100%;
        }

        .siselayer {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            background-color: #4445a049; /*演示為瞭看效果加上的,可以去掉*/
            cursor: col-resize;
        }

    </style>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div style="width: 600px;overflow: auto">
    <table>
        <tr>
            <th width="150">Firstname</th>
            <th width="150">Lastname</th>
            <th width="150">Savings</th>
        </tr>
        <tr>
            <td>Bill</td>
            <td>Gates</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Steve</td>
            <td>Jobs</td>
            <td>$150</td>
        </tr>
        <tr>
            <td>Elon</td>
            <td>Musk</td>
            <td>$300</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>Zuckerberg</td>
            <td>$250</td>
        </tr>
    </table>
</div>
<script>

    $("th").mouseover(function (e) {
        if (($(this).find("div").length <= 0)) {
            //1.鼠標移動到表頭上時,在th內部添加一個div 元素,用於處理後續拖動事件
            $(this).append("<div class='th-sisehandler'></div>")

            //2.處理上面添加的元素的鼠標按下事件
            $(".th-sisehandler").mousedown(function (evt) {
                //3.在添加的元素上按下時,記錄下當前的th表頭
                let dragTh = $(this).parent()


                //4.記錄按下時的鼠標位置
                let oldClientX = evt.clientX;
                //5.獲取當前鼠標按下時的表頭的寬度
                let oldWidth = dragTh.width();
                /*6.添加一個全局layer層,用於處理鼠標按下時鼠標移動事件,因為不能在第一步添加的元素上處理鼠標移動事件,添加的元素太小,
                    鼠標容易跑出范圍,就捕獲不到後續事件
                    所以添加一個全局的遮罩層,捕獲鼠標移動事件。
                 */

                let changeSizeLayer = $('<div class="siselayer"></div>');
                $("body").append(changeSizeLayer);

                changeSizeLayer.on('mousemove', function (evt) {
                    //7.處理遮罩層的鼠標移動事件,計算新的表頭寬度
                    var newWidth =evt.clientX - oldClientX + oldWidth;
                    //設置新的寬度
                    dragTh.attr('width',Math.max(newWidth,1));

                });

                changeSizeLayer.on('mouseup', function (evt) {
                    //8.鼠標按鍵復位時,要清楚遮罩層
                    changeSizeLayer.remove();
                    dragTh.find('.th-sisehandler').remove();
                });
            })
        }

        $(this).mouseleave(function () {
            //9.鼠標離開表頭時,要移除第一步添加的div
            $(this).find("div").remove()
        })
    })


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

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: