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

代码如下：

[javascript] view
plaincopy

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <mce:script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></mce:script>
  5. <mce:style><!--
  6. .resizeDivClass
  7. {
  8. position:absolute;
  9. background-color:gray;
  10. width:2px;
  11. height:15px;
  12. z-index:1px;
  13. display: block;
  14. cursor:e-resize
  15. }
  16. .td1 {
  17. font-size: 12px;
  18. white-space:nowrap;
  19. color:#0000ff;
  20. }
  21. --></mce:style><style mce_bogus="1">.resizeDivClass
  22. {
  23. position:absolute;
  24. background-color:gray;
  25. width:2px;
  26. height:15px;
  27. z-index:1px;
  28. display: block;
  29. cursor:e-resize
  30. }
  31. .td1 {
  32. font-size: 12px;
  33. white-space:nowrap;
  34. color:#0000ff;
  35. }</style>
  36. <mce:script language=javascript><!--
  37. /*
  38. 标题：扩拖拽列表格demo 1.2
  39. 设计：卢松强
  40. 博客：http://hi.csdn.net/andensy
  41. 日期：2010年4月26日
  42. 说明：修改了firfox兼容性问题，可以很好的兼容火狐浏览器
  43. */
  44. /*
  45. 依赖于jQuery
  46. */
  47. (function($){
  48. //用正则表达式判断jQuery的版本
  49. if (/1/.(0|1|2)/.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
  50. alert('movedTh 需要 jQuery v1.2.6 以后版本支持!  你正使用的是 v' + $.fn.jquery);
  51. return;
  52. }
  53. me=null;
  54. var ps=3;
  55. $.fn.movedTh=function(){
  56. me=this;
  57. var target = null;
  58. var tempStr = "";
  59. var i=0;
  60. $(me).find("tr:first").find("th").each(function(){
  61. tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"  ></div>';
  62. var div={};
  63. $(this).html($(this).html()+tempStr);
  64. var offset = $(this).offset();
  65. var pos=offset.left +$(this).width()+ me.offset().left-ps;
  66. $("#mydiv"+i).addClass("resizeDivClass");
  67. $("#mydiv"+i).css("left",pos);
  68. $("#mydiv"+i).css("top",(offset.top+2));
  69. i++;
  70. }); //end each
  71. }   //end moveTh
  72. $.fn.mousedone={
  73. movedown:function(e,obj){
  74. var d=document;
  75. var e = window.event||e ;
  76. var myX = e.clientX||e.pageX;
  77. obj.mouseDownX=myX ;
  78. obj.pareneTdW=$(obj).parent().width();  //obj.parentElement.offsetWidth;
  79. obj.pareneTableW=me.width();
  80. if(obj.setCapture){
  81. obj.setCapture();
  82. }else if(window.captureEvents){
  83. window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  84. }
  85. d.onmousemove=function(e){
  86. var dragData=obj;
  87. var event = window.event||e ;
  88. if(!dragData.mouseDownX) return false;
  89. var newWidth=dragData.pareneTdW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX;
  90. if(newWidth>0)
  91. {
  92. $(obj).parent().width(newWidth);
  93. me.width(dragData.pareneTableW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX);
  94. var k=0;
  95. me.find("tr:first").find("th").each(function(){
  96. var offset = $(this).offset();
  97. var pos=offset.left*1+$(this).width()*1+me.offset().left*1-ps;
  98. $("#mydiv"+k).css("left",pos);
  99. k++;
  100. })  //end each
  101. }//end if
  102. };
  103. d.onmouseup=function(e){
  104. var dragData=obj;
  105. if(dragData.setCapture)
  106. {
  107. dragData.releaseCapture();
  108. }else if(window.captureEvents){
  109. 　　　　            window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP);
  110. }
  111. dragData.mouseDownX=0;
  112. }
  113. }
  114. }   //end mousedone
  115. $(window).resize(function(){
  116. setTimeout(function() {
  117. var target = null;
  118. var tempStr = "";
  119. var i=0;
  120. $(me).find("tr:first").find("th").each(function(){
  121. tempStr = '<div id="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"  ></div>';
  122. var div={};
  123. $(this).html($(this).html()+tempStr);
  124. var offset = $(this).offset();
  125. var pos=offset.left +$(this).width()+ me.offset().left-ps;
  126. $("#mydiv"+i).addClass("resizeDivClass");
  127. $("#mydiv"+i).css("left",pos);
  128. i++;
  129. }); //end each
  130. }, 10);
  131. });
  132. })(jQuery)
  133. $().ready(function(){
  134. $("#tab").movedTh();
  135. })
  136. // --></mce:script>
  137. </head>
  138. <body onload="">
  139. <table cellpadding="3" id='' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" >
  140. <tr bgcolor=cccccc >
  141. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th>
  142. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th>
  143. </tr></table>
  144. <br>
  145. <table cellpadding="3" id='tab' STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" >
  146. <tr bgcolor=cccccc >
  147. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
  148. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
  149. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
  150. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
  151. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
  152. <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th>
  153. </tr>
  154. <tr>
  155. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  156. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  157. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  158. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  159. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  160. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  161. </tr>
  162. <tr>
  163. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  164. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  165. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  166. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  167. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  168. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  169. </tr>
  170. <tr>
  171. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  172. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  173. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  174. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  175. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  176. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  177. </tr>
  178. <tr>
  179. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  180. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  181. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  182. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  183. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  184. <td class="td1"><nobr>改变table的列宽度</nobr></td>
  185. </tr>
  186. </table>
  187. </body>
  188. </html>
更多0
  • 上一篇：一个可拖拽列宽表格demo
  • http://blog.csdn.net/andensy/article/details/5528944

    • jQuery表格列宽可变，兼容firfox的更多相关文章

    1. 使用jqueryUI实现自由调整表格列宽

      今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实 ...

    2. 转！！Java JTable 根据表格内容 自动调整表格列宽

      //根据表格内容 自动调整列宽http://blog.sina.com.cn/s/blog_5e54d6140100s1d3.html

    3. eas之添加表格列宽自动调整设置

      设置表格整体宽度自动调整为所在panel的宽度 KDTable table=new KDTable(); table. setAutoResize (boolean); 注意:该功能在冻结功能启用后, ...

    4. java表格操作之设置表格列宽

      设置所有列的宽度 /** * 设置所有列的列宽 * @param table * @param width */ public void setAllColumnWidth(JTable table, ...

    5. 原生js实现table表格列宽自由缩放

      <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

    6. 原生js实现 table表格列宽拖拽

      查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

    7. JS实现表格列宽拖动

      在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...

    8. JQuery 表格拖动调整列宽效果

      类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

    9. QTableView表格视图的列宽设置

      Qt中的表格控件可以通过从QTableView或QTableWidget派生子类实现.其中,QTableWidget只是对QTableView的一种简单封装.因为使用QTableView常常需要用户指 ...

    随机推荐

    1. bzoj 4128 矩阵求逆

      /************************************************************** Problem: 4128 User: idy002 Language: ...

    2. nginx 方向代理 jenkins

      环境 10.0.0.20 Nginx 10.0.0.21 jenkins 10.0.0.20 nginx 进入到nginx目录,去除无用字段输入到conf.d/jenkins.conf 文件中 [ro ...

    3. adblock 下载地址

      addblock 的作用: 防止追踪.恶意域名,过滤横幅广告.弹窗广告以及视频广告.   用以支持网站的非侵入式广告将不会被屏蔽 下载地址:https://pan.baidu.com/share/li ...

    4. python 安装pip setuptools

      注意操作前提一定要使用管理员方式运行 python目录要完全允许控制 windows7 下 0.先安装python2.7.13 32位:https://www.python.org/ftp/pytho ...

    5. Python：内置函数

      Python所有的内置函数     Built-in Functions     abs() divmod() input() open() staticmethod() all() enumerat ...

    6. RxJava2学习笔记(2)

      上一篇已经熟悉了Observable的基本用法,但是如果仅仅只是“生产-消费”的模型,这就体现不出优势了,java有100种办法可以玩这个:) 一.更简单的多线程 正常情况下,生产者与消费者都在同一个 ...

    7. EasyUI学习总结(三)——easyloader源码分析(转载)

      声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...

    8. windows 启动关闭Oracle监听和服务

      经常要用数据库,让他自己启动的话,开机太慢,所以用命令启动方便点.    1.开启:     在运行中输入cmd,进入控制台,lsnrctl start回车,提示启动监听成功后 net start O ...

    9. 数据库 简介 升级 SQLite 总结 MD

      Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

    10. 使用go语言操作db2

      操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 db2版本: db2_v101_linuxx64_expc 问题描述 怎么使用go语言在CentO ...