jquery實現(xiàn)拖拽table表頭改變列寬

更新時間：2022年02月22日 12:19:33 作者：代號95+27

這篇文章主要為大家詳細介紹了jquery實現(xiàn)拖拽table表頭改變列寬，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)拖拽table表頭改變列寬的具體代碼，供大家參考，具體內(nèi)容如下

效果:

直接上代碼,有注釋:

<!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內(nèi)部添加一個div 元素，用于處理后續(xù)拖動事件
? ? ? ? ? ? $(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層，用于處理鼠標按下時鼠標移動事件，因為不能在第一步添加的元素上處理鼠標移動事件，添加的元素太小，
? ? ? ? ? ? ? ? ? ? 鼠標容易跑出范圍，就捕獲不到后續(xù)事件
? ? ? ? ? ? ? ? ? ? 所以添加一個全局的遮罩層，捕獲鼠標移動事件。
? ? ? ? ? ? ? ? ?*/

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

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

? ? ? ? ? ? ? ? });

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

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


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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: