jQuery表格列宽可变，兼容firfox

最新推荐文章于 2020-09-17 11:05:35 发布

原创最新推荐文章于 2020-09-17 11:05:35 发布 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

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

JavaScript&jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的表格列宽可拖拽调整的方法，并确保在Firefox等浏览器中具备良好的兼容性。通过简单地调用$("#id").movedTh()即可实现表格列宽的动态调整。

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

代码如下：

<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:15px; z-index:1px; display: block; cursor:e-resize } .td1 { font-size: 12px; white-space:nowrap; color:#0000ff; }</style> <mce:script language=javascript></mce:script> </head> <body onload=""> <table cellpadding="3" id='' 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> </tr></table> <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>