这篇文章主要讲解了“jquery怎么实现拖拽table表头改变列宽”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery怎么实现拖拽table表头改变列宽”吧！

效果:

直接上代码,有注释:

<!DOCTYPEhtml><html><head><style>table,td,th{border:1pxsolid#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><metacharset="UTF-8"><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><div><table><tr><thwidth="150">Firstname</th><thwidth="150">Lastname</th><thwidth="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("<divclass='th-sisehandler'></div>")//2.处理上面添加的元素的鼠标按下事件$(".th-sisehandler").mousedown(function(evt){//3.在添加的元素上按下时，记录下当前的th表头letdragTh=$(this).parent()//4.记录按下时的鼠标位置letoldClientX=evt.clientX;//5.获取当前鼠标按下时的表头的宽度letoldWidth=dragTh.width();/*6.添加一个全局layer层，用于处理鼠标按下时鼠标移动事件，因为不能在第一步添加的元素上处理鼠标移动事件，添加的元素太小，鼠标容易跑出范围，就捕获不到后续事件所以添加一个全局的遮罩层，捕获鼠标移动事件。*/letchangeSizeLayer=$('<divclass="siselayer"></div>');$("body").append(changeSizeLayer);changeSizeLayer.on('mousemove',function(evt){//7.处理遮罩层的鼠标移动事件，计算新的表头宽度varnewWidth=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表头改变列宽这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！