这篇文章主要讲解了“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 > <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>感谢各位的阅读，以上就是“jquery怎么实现拖拽table表头改变列宽”的内容了，经过本文的学习后，相信大家对jquery怎么实现拖拽table表头改变列宽这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
