一个可拖拽列宽表格demo

最新推荐文章于 2024-04-14 09:39:10 发布
最新推荐文章于 2024-04-14 09:39:10 发布
阅读量5.2k 收藏
点赞数
分类专栏： JavaScript&jQuery 文章标签： table class function jquery 正则表达式 each
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andensy/article/details/5511811
版权

本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id后，直接调用$("#id").movedTh()即可方便实现。

全部代码如下，jQuery包需自己导入：

andensy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Table 列宽拖动
04-27
当鼠标在table两列头之间时，鼠标变成双箭头，拖动鼠标可以调节table列的宽度。
可拖动的表格
grous的专栏
08-17 813
.TableView{ margin:0 auto;table-layout:fixed; border:#CCC solid 1px; line-height:23px; text-align:center;             border-collapse:collapse;width:100%;} .TableView th{ border:#CCC solid 1px;backg
table列宽拖拽
Jalen备忘录
05-29 2028
1. 使用第三方组件colResizable-1.6.min.js （官网：http://www.bacubacu.com/colresizable/） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit...
实现一个可拖拽表格
clhdtzhh的博客
03-06 1155
一、如何使用sortable.js 二、如果搭建mock.js服务器 三、如何根据需求封装axios 四、如何使用svg-icon 五、vue过滤器
鼠标拖动调整table列宽实例
09-28
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。
jQuery表格列宽可拖拽改变且兼容firfox
01-21
本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$(“#id”).movedTh()即可方便实现，修改了firfox的兼容性。 代码如下...
html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo.rar
12-31
这个特性通常是通过在表格上方或旁边添加一个可折叠的区域实现的，该区域包含输入框和其他搜索条件。使用CSS的`display`属性可以轻松实现元素的隐藏和显示。当用户点击某个按钮或链接时，JavaScript可以改变这些...
table 表格宽度拖动demo
09-08
"table 表格宽度拖动demo"就是一个专门针对这一需求的示例，它展示了如何实现用户可以通过拖动来调整表格列宽的功能。 首先，我们需要理解HTML中的`<table>`元素，它是创建表格的基础。`<table>`包含`<thead>`...
colResizable表格列宽支持拖动效果
02-25
4. `css`: 可能包含插件的样式文件，用于调整拖动列宽时的视觉效果，如`colResizable.css`。 在实际开发中，我们还需要考虑兼容性问题，确保插件在各种浏览器上都能正常工作。此外，对于大数据量的表格，我们可能...
javascript表格可调整列宽(兼容firfox/IE)
04-26
本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。
可拖动、排序的表格
01-09
可拖动、排序的表格、内容超出隐藏。界面较精致，大家拿去就可以直接用了。
可拖动、排序的表格非常灵活,样式也很好看
11-14
可拖动、排序的表格,非常灵活,样式也很好看,大家可以下了
基于jquery可拖动表格
05-22
基于jquery可拖动表格 jquery 表格行可拖动 源码 使用说明
可拖动行列的表格
09-19
可拖动行列的表格 行之间拖动交换 列之间拖动交换
table实现列宽的拖动效果
05-04
NULL 博文链接：https://jifeng3321.iteye.com/blog/2403674
推荐Vue-Drag-Tree-Table：一款强大且灵活的拖拽树状表格组件
最新发布
gitblog_00073的博客
04-14 994
推荐Vue-Drag-Tree-Table：一款强大且灵活的拖拽树状表格组件 项目地址:https://gitcode.com/mafengwo/vue-drag-tree-table 项目简介 Vue-Drag-Tree-Table 是一个基于 Vue.js 的开源项目，旨在为开发者提供一个功能丰富的、可拖动排序和具有层级结构的表格组件。它允许你在表格中轻松实现数据的动态排序和组织，特别是在需要...
【Vue】表格可拖拽滚动
weixin_43790653的博客
12-06 2390
Vue3使用Element-plus时如何实现表格可拖拽滚动
可拖拽表格保存拖拽顺序，按照拖拽顺序进行下载
Ybittersweet的博客
06-26 1041
可拖拽表格下载
elemetui自定义表格实现可拖拽列、显示隐藏列、数据汇总、自适应宽度
m0_62095536的博客
09-21 3259
给每一列添加这个代码如果只是想在某一列添加可以这样，宽度自定义方法如下：注意如果那一列的数据存在某一个是空值那么那一项就会不进入自适应宽度，把下面的注释掉就可以了；// 自适应表格列宽// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。if (!
使用JavaScript写一个可以左右丝滑拖动列宽表格带上样式
05-24
好的，下面是一个简单的可左右拖动列宽的表格代码示例，同时也带上了一些基本的样式： HTML： ```html <table id="myTable"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Col 1</td> <td>Row 1, Col 2</td> <td>Row 1, Col 3</td> </tr> <tr> <td>Row 2, Col 1</td> <td>Row 2, Col 2</td> <td>Row 2, Col 3</td> </tr> <tr> <td>Row 3, Col 1</td> <td>Row 3, Col 2</td> <td>Row 3, Col 3</td> </tr> </tbody> </table> ``` CSS： ```css table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; } thead { background-color: #f2f2f2; } th { background-color: #e6e6e6; } td { border-bottom: 1px solid #ddd; } /* 定义可拖动的列 */ .col-resize { width: 8px; cursor: col-resize; position: absolute; top: 0; right: 0; bottom: 0; z-index: 10; -moz-user-select: none; -webkit-user-select: none; user-select: none; } /* 定义拖动列时的样式 */ .col-resize:hover { background-color: #f4f4f4; } ``` JavaScript： ```javascript // 获取表格元素 var table = document.getElementById("myTable"); // 获取表头元素 var headers = table.getElementsByTagName("th"); // 循环遍历所有表头 for (var i = 0; i < headers.length; i++) { // 定义变量，用于存储当前列的宽度 var currentWidth; // 创建一个 div 元素，用于拖动改变列宽 var div = document.createElement("div"); // 给 div 元素添加自定义类名 div.className = "col-resize"; // 给 div 元素添加事件监听器，用于处理拖动事件 div.addEventListener("mousedown", function(event) { // 阻止默认事件 event.preventDefault(); // 将当前列的宽度存储到变量中 currentWidth = this.parentNode.offsetWidth; // 将当前列的索引存储到变量中 var columnIndex = Array.prototype.indexOf.call(this.parentNode.parentNode.children, this.parentNode); // 将鼠标按下事件添加到 document 上，用于处理拖动过程中的事件 document.addEventListener("mousemove", mousemove); // 将鼠标抬起事件添加到 document 上，用于处理拖动结束后的事件 document.addEventListener("mouseup", mouseup); // 定义一个鼠标移动事件处理函数 function mousemove(event) { // 计算拖动距离 var diff = event.pageX - currentWidth; // 设置当前列的宽度为拖动距离 headers[columnIndex].style.width = diff + "px"; } // 定义一个鼠标抬起事件处理函数 function mouseup(event) { // 将鼠标移动事件从 document 上移除 document.removeEventListener("mousemove", mousemove); // 将鼠标抬起事件从 document 上移除 document.removeEventListener("mouseup", mouseup); } }); // 将 div 元素添加到当前表头元素的子元素列表中 headers[i].appendChild(div); } ``` 这段代码使用了原生 JavaScript 实现了可左右拖动列宽的表格，并使用 CSS 添加了一些基本的样式。当鼠标按下拖动列宽的时候，通过添加事件监听器处理鼠标移动和抬起事件，并计算出拖动距离来改变列的宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值