拖动改变Table的列宽度

最新推荐文章于 2020-12-23 16:35:07 发布

原创最新推荐文章于 2020-12-23 16:35:07 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #function #文档 #object

工作心得专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种通过鼠标事件实现网页表格列宽调整的方法。主要包括三个函数：MouseDownToResize用于开始调整列宽；MouseMoveToResize实现实时调整列宽；MouseUpToResize结束列宽调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//改变列宽onmousedown事件
function MouseDownToResize(obj)
{
obj.mouseDownX=event.clientX;//获得鼠标down事件的x坐标，设置正在改变
obj.pareneTdW=obj.parentElement.offsetWidth;//获得当前对象的父对象的宽度
obj.pareneTableW=tableNew.offsetWidth;//获得table的宽度
obj.setCapture();// 当一个object的被 setCapture 后，他的方法将会被继承到整个文档进行捕获。
}
//改变列宽onmousemove
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;
dataHeader.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
//改变列宽mouseUp
function MouseUpToResize(obj)
{
obj.releaseCapture();//当不需要把方法继承到整个文档捕获时，要用 object.releaseCapture()
obj.mouseDownX=0;//取消
}