JavaScript实现拖动改变列宽

最新推荐文章于 2023-12-07 10:06:40 发布

原创最新推荐文章于 2023-12-07 10:06:40 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #class #function #border #float #中国电信

Web开发专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了一种使用JavaScript实现的HTML表格列宽拖动调整的方法。通过添加特定的CSS类和JavaScript事件监听，用户可以鼠标拖动表格列边框来实时改变列的宽度。代码示例中详细展示了如何设置样式和定义拖动事件处理函数。

以下是一个JavaScript实现的通过鼠标拖动的Html代码示例,具有很强的通用性:

<html> <title>拖动列宽的表格</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.bg td{ font-size:12px; text-align:left; line-height:15px; height:20px; } .bg td.tit{ background-color:#e2e2e2; height:17px; text-align:center; line-height:15px; } .bg td.num{ background-color:#e2e2e2; text-align:right; line-height:15px; width:30px; height:22px; } .resizeDivClass{ text-align:right; width:1px; margin:0px 0 0px 0; background:#fff; border:0px; float:right; cursor:e-resize; } </style> <mce:script language="javascript"></mce:script> <body> <table width="100%" class="bg" border=1 cellspacing=0 bordercolorlight="#7b7b7b" bordercolordark="#efefef" id="theObjTable"> <tr> <td class="num">序号</td> <td width="100px" class="tit"> <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 公司名称 </td> <td class="tit"> <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 订单客户 </td> <td class="tit"> <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 部门 </td> <td class="tit"> <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 业务员 </td> <td class="tit"> <span class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></span> 交款方式 </td> </tr> <tr> <td class="num" >1</td> <td >中国电信</td> <td >订单客户名称</td> <td >广告部</td> <td >王天一</td> <td >现金</td> </tr> <tr> <td class="num" >2</td> <td >中国移动</td> <td >订单客户名称</td> <td >营销部</td> <td >李小红</td> <td >信用卡</td> </tr> <tr> <td class="num" >3</td> <td >中国联通</td> <td >订单客户名称</td> <td >市场部</td> <td >王老二</td> <td >银行卡</td> </tr> </table> <mce:script language="javascript"></mce:script> </body> </html>