拖动改变Table的列宽度

最新推荐文章于 2023-12-07 10:06:40 发布
最新推荐文章于 2023-12-07 10:06:40 发布
阅读量134 收藏
点赞数

收藏自：http://www.cnblogs.com/xieex/archive/2007/12/15/996025.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style>
.resizeDivClass
{
position:relative;
background-color:red;
width:2;
z-index:1;
left:expression(this.parentElement.offsetWidth-1);
cursor:e-resize;
}
</style>
<script language=javascript>
function MouseDownToResize(obj){
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj){
    if(!obj.mouseDownX) return false;
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>0)
    {
obj.parentElement.style.width = newWidth;
//theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj){
obj.releaseCapture();
obj.mouseDownX=0;
}
</script>
</head>
<body>
拖动表列改变table的列宽度
<table id=theObjTable STYLE="table-layout:fixed" >
<tr bgcolor=cccccc >
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" 
onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
列一</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" 
onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
列二</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" 
onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
列三</td>
</tr>
<tr>
<td>拖动表列改变table的列宽度</td><td>拖动表列改变table的列宽度</td><td>拖动表列改变table的列宽度</td>
</tr>
</table>
</body>
</html>

weixin_34417635
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html表格列拖拽,table表格列顺序拖拽和列宽度拖拽
weixin_35255032的博客
06-16 1155
目前项目要求对表格可进行宽度拖拽和排序拖拽。用的第三方库库ant-desigin-vue。对于列宽度拖拽在ant-desigin-vue的table示例中有对应的案例，但是直接复制代码，会报错。最后看了源代码，对案例代码进行了修改。安装第三方库npm install vue-draggable-resizable --savenpm install sortablejs --save引入impor...
bootstrap-table拖拽表格改变列宽
08-31
bootstrap-table拖拽表格改变列宽，兼容主流浏览器，兼容body与header对齐
table 表格拖动改变列宽
haogemr的博客
03-05 2415
参考博客：前端页面实现table可拖动改变列宽 引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery （1）colResizable下载：http://www.bacubacu.com/colresizable/#rangeSlider （2）引入文件： <script src="https://code.jquery.com...
table拖动改变列宽和行宽
万里飞鹏的博客
08-29 3216
使用jquery原文地址https://www.cnblogs.com/qq545505061/p/9647867.html； 初始话属性设置文档https://www.douban.com/note/86224998/ 最新跟新，table加上属性width:fit-content;td设置初始宽度，这样拖动列宽，table行宽也能跟着动了并且自动产生滚动条，原先table只有table-l...
antd实现Table拖拽调整列宽
weixin_46600931的博客
01-30 4975
table表单列宽拖拽在最新的antd 版本中已经没有demo了，需要去过完版本去找3.26.19。注意：在实现拖曳功能的前提是。
js 实现table每列可左右拖动改变列宽度
热门推荐
zanychou的专栏
07-21 3万+
table 用户编号 试用时间转正时间性别姓名拼音 生日时间民族身高 2000001 1997-3-131997-3-131WZJ 1965-3-13汉171 2000045 2001-2-152001-3-150WY 1978-8-5汉162 2000046 2001-2-232001-3-230LQ 2001-2-23汉171
改变table的列宽度
12-15
改变table的列宽度，可以拖拽的td表格，表格内文字只显示一行，超过的部分自动隐藏
jquery滑动改变table列宽度
08-20
在本文中，我们将深入探讨如何使用jQuery实现一个功能，即通过鼠标拖动来改变HTML表格（table）的列宽。这个功能在现代浏览器如Firefox、Chrome、Safari、Opera、傲游和搜狗中都能正常工作，但遗憾的是，它不支持...
JQuery table改变列的宽度
03-22
标题"JQuery table改变列的宽度"涉及到的主要知识点包括： 1. **jQuery选择器**：选择器是jQuery的核心功能之一，它允许我们根据ID、类名、属性等条件选取DOM元素。例如，`$("#myTable")`会选择ID为`myTable`的表格...
vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现
05-16
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
鼠标拖动调整table列宽实例
09-28
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置
09-23
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置，完美兼容IE，FireFox，Google Chrome浏览器。
实现bootstrap table可设置列宽和可拖动列宽
11-23
修改bootstrap table设置列宽问题，增加插件和bootstrap table组合可随意拖动表格的列宽
table实现列宽的拖动效果
05-04
NULL 博文链接：https://jifeng3321.iteye.com/blog/2403674
table列排序、列拖动、列宽度变化、行交换
12-20
实现table的行中元素大小排序、行变换、列位置拖动以及列宽度的拖动
html table列宽可拉动,可以拖动改变table列宽的sample
weixin_33421411的博客
06-17 1648
一标题二标题三标题四内容A内容B内容C内容D内容A内容B内容C内容D内容A内容B内容C内容D内容A内容B内容C内容D内容A内容B内容C内容D内容A内容B内容C内容D内容A内容B内容C内容DsetResizeAble(tbl);var onDrag=0,gblResizeObj;var blStartMove = false;var blTd = false;function setResizeAb...
原生js实现 拖拽改变 table表格列宽
最新发布
weixin_57456011的博客
12-07 806
【代码】原生js实现 拖拽改变 table表格列宽。
＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高 及 使用注意事项 ＞
一个平平无奇的技术宅
02-17 1万+
由于项目需求，需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源，出一期 “ 使用事项 ” 及 使用过程中的问题汇总
【鼠标拖动改变表格列宽和行高】
m0_55546349的博客
05-29 522
鼠标拖动改变表格列宽和行高
html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽
06-12
实现 HTML 表格宽度拖拽，可以使用原生 JavaScript 来实现。以下是一个简单的实现方式： HTML 代码： ``` <table id="myTable"> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> </table> ``` JavaScript 代码： ``` var table = document.getElementById("myTable"); var isResizing = false; var lastDownX = 0; // 设置每列的初始宽度 var columnWidths = [100, 100, 100]; for (var i = 0; i < table.rows[0].cells.length; i++) { table.rows[0].cells[i].style.width = columnWidths[i] + "px"; } // 鼠标按下时记录位置 table.addEventListener("mousedown", function (e) { isResizing = true; lastDownX = e.clientX; }); // 鼠标移动时改变列宽度 table.addEventListener("mousemove", function (e) { if (!isResizing) { return; } var cell = e.target.parentElement; var cellIndex = Array.from(cell.parentElement.children).indexOf(cell); var widthDiff = e.clientX - lastDownX; // 改变当前列的宽度 var newWidth = columnWidths[cellIndex] + widthDiff; if (newWidth > 0) { cell.style.width = newWidth + "px"; columnWidths[cellIndex] = newWidth; lastDownX = e.clientX; } }); // 鼠标抬起时停止改变列宽度 table.addEventListener("mouseup", function (e) { isResizing = false; }); ``` 以上代码会在表格中添加一个鼠标事件监听器，当用户按下鼠标并移动时，会根据鼠标的位置改变被选中列的宽度。需要注意的是，当用户拖动列宽度时，应该记录每列的初始宽度（在这里使用了 `columnWidths` 数组来记录），并在移动过程中修改当前列的宽度，而不是仅仅修改当前列的宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值