本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. [NOIp2007提高组]矩阵取数游戏

      OJ题号:洛谷1005 思路: 动态规划. 不难发现每行能够取得的最大值仅与当前行的数据有关,因此本题可以对每行的数据分别DP,最后求和. 设$f_{i,j}$表示左边取$i$个.右边取$j$个的最大 ...

    2. python开发线程:线程&守护线程&全局解释器锁

      一 threading模块介绍 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性,因而不再详细介绍 官网链接:https://docs.python ...

    3. ORACLE 内置函数之 GREATEST 和 LEAST（转）

      Oracle比较一列的最大值或者最小值,我们会不假思索地用MAX和MIN函数,但是对于比较一行的最大值或最小值呢?是不是日常用的少,很多人都不知道有ORACLE也有内置函数实现这个功能:COALESC ...

    4. db2报错信息

      sqlcode sqlstate 说明000 00000 SQL语句成功完成01xxx SQL语句成功完成,但是有警告+012 01545 未限定的列名被解释为一个有相互关系的引用+098 01568 ...

    5. Reactor 3 学习笔记(2)

      接上篇继续学习各种方法: 4.9.reduce/reduceWith @Test public void reduceTest() { Flux.range(1, 10).reduce((x, y) ...

    6. RxJava2学习笔记(3)

      接上回继续,今天来学习下zip(打包)操作 一.zip操作 @Test public void zipTest() { Observable.zip(Observable.create(emitter ...

    7. SQLite日期时间函数

      SQLite日期时间函数 SQLite支持以下五个日期时间函数: date(timestring, modifier, modifier, …) time(timestring, modifier, ...

    8. windows 2003 iis 360防黑加固后不能使用

      最近在使用360的防黑加固加固2003系统,发现IIS居然不能够使用了,报401.1错误,查找解决方案如下: 1.我的电脑-〉属性-〉管理-〉本地用户和组,查看IUSER用户是否开启,如果未开启开启后 ...

    9. vscode下调试caffe源码

      caffe目录: ├── build -> .build_release // make生成目录,生成各种可执行bin文件,直接调用入口: ├── cmake ├── CMakeLists.tx ...

    10. angular default project (angular.json的解读)

      Change the default Angular project Understanding it's purpose and limits Klaus KazlauskasFollow Nov ...