jquery实现拖拽table表头改变列宽
更新时间：2022年02月22日 12:19:33 作者：代号95+27
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
xheditor和validate都是优秀的jQuery插件，但将两者组合到起，如果初始化的顺序不当，则会出现一些微妙的结果。2010-04-04
在jquery中，jquery动画事件和动画函数经常用的到，今天小编抽时间给大家整理了些关于常用的jquery动画事件和动画函数，对jquery动画函数和动画事件相关知识感兴趣的朋友一起学习吧2022-12-12
jQuery获取文本节点之 text()/val()/html() 方法区别
在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?2011-03-03
上周发布了‘jquery开发的数独游戏’，下载量很多评论的人很少。近期会将主要的开发思路整理出来与大家交流，非常希望与大家通过这个例子共同探讨和学习。2010-11-11
本文给大家分享的是一段基于Jquery实现表单验证的代码，非常简单实用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
下面小编就为大家分享一篇基于jquery的on和click的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了jquery单击文字或图片内容放大并居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
很多网站都应用了评分效果，让用户可以对正在浏览的文章、电影、资源等进行评分，让网站增添了几分互动效果。本文将讲解如何使用jQuery来实现评分效果。2015-05-05
这篇文章主要介绍了jQuery实现预加载图片的方法,涉及jQuery操作img的src属性使用技巧,需要的朋友可以参考下2015-03-03
修复 jQuery 中 isFunction 方法的 BUG2010-01-01
最新评论