一个可拖拽列宽表格demo

最新推荐文章于 2024-07-29 17:39:57 发布

原创最新推荐文章于 2024-07-29 17:39:57 发布 · 5.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #class #function #jquery #正则表达式 #each

JavaScript&jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的表格列宽可拖拽调整功能的demo。通过简单的函数调用，即可实现在浏览器中任意调整表格列宽，并在页面重置时保持布局不变。

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

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script> <mce:style></mce:style><style mce_bogus="1">.resizeDivClass { position:absolute; background-color:gray; width:2px; height:auto; z-index:1px; display: block; cursor:e-resize } .td1 { font-size: 12px; white-space:nowrap; overflow:hidden; color:#0000ff; }</style> <mce:script language=javascript></mce:script> </head> <body onload=""> <table cellpadding="3" id='tab' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" > <tr bgcolor=cccccc > <th valign=top class="td1" >改变table的列宽度改</th> <th valign=top class="td1" >改变table的列宽度改</th> <th valign=top class="td1" >改变table的列宽度改</th> <th valign=top class="td1" >改变table的列宽度改</th> <th valign=top class="td1" >改变table的列宽度改</th> <th valign=top class="td1" >改变table的列宽度改</th> </tr> <tr> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> </tr> <tr> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> </tr> <tr> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> </tr> <tr> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> <td class="td1">改变table的列宽度</td> </tr> </table> </body> </html>