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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JQuery表格拖动调整列宽效果(自己动手写的)
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.
-
JQuery拖动表头边框线调整表格列宽效果代码
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.
-
jQuery实现鼠标可拖动调整表格列宽度
实现鼠标可拖动调整表格列宽度 如图: 一.引入文件: 复制代码 代码如下: <script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="/js/store.js" type="text/javascript"></script> <script src="
-
jQuery表格列宽可拖拽改变且兼容firfox
本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性. 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
-
jquery实现拖拽table表头改变列宽
本文实例为大家分享了jquery实现拖拽table表头改变列宽的具体代码,供大家参考,具体内容如下 效果: 直接上代码,有注释: <!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid #ddd; text-align: left; } table {
-
jQuery实现拖拽页面元素并将其保存到cookie的方法
本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法.分享给大家供大家参考,具体如下: 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"&g
-
基于el-table封装的可拖拽行列、选择列组件的实现
效果 需要环境 vue elementUI 拖拽插件Sortable.js 需配置属性 示例 <HTable :columns="columns" :data="list" :setColumn="true" tableKey="CategoriesList" style="width: 100%" border > // 这里可以放插槽 <template slot="crea
-
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
jquery利用拖拽方式在图片上添加热链接
本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考.具体如下: 运行效果截图如下: 项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后打开相关产品的介绍. 用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松
-
jQuery实现拖拽效果插件的方法
本文实例讲述了jQuery实现拖拽效果插件的方法.分享给大家供大家参考.具体如下: 下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素,这个插件可以在移动设备上运行 /** * jQuery Drag and Scroll * * Copyright (c) 2012 Ryan Naddy (ryannaddy.com) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/li
-
jQuery div拖拽用法实例
本文实例讲述了jQuery div拖拽用法.分享给大家供大家参考,具体如下: 这里需要引用好jquery 和 jqueryui两个包: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta n
-
JS实现拖拽进度条改变元素透明度
今天要分享的是运用原生JS拖拽进度条改变元素透明度,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS拖拽进度条改变元素透明度</title> <style> #pa
-
jquery实现拖拽添加元素功能
本文实例为大家分享了jquery实现拖拽添加元素的具体代码,供大家参考,具体内容如下 需求 1.页面上有两个不同的容器,拖拽a容器的元素添加到b容器中: 2.a保持原位不dogn动,b增加新的元素,要实现的效果如下: 3.点击b容器中的元素移除元素 首先准备两个容器 页面效果如下 <div class="bigBox"> <div id="aBox"> <p class="drag" draggable="
-
vue.js Table 组件自定义列宽实现核心方法
目录 前言 colgroup 和 col 核心实现 一些常量/变量定义 初始化表头列表 initColumns 处理含有固定宽度和最小宽的列 获取各列宽度,并组成一个数组 getWidthList 计算需要自适应的列宽度 getAdaptWidth 监听屏幕变化和属性更新 前言 如果你使用过类似于 ElementUI 的组件库,一定对如下的 API 属性不眼生,例如: <!-- Element UI --> <el-table-column prop="date" l