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。