本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. [BZOJ5427]最长上升子序列/[BZOJ4282]慎二的随机数列

      [BZOJ5427]最长上升子序列/[BZOJ4282]慎二的随机数列 题目大意: 给你一个长度为\(n(n\le10^5)\)的整数序列,其中有一些数已经模糊不清了,现在请你任意确定这些整数的值,使 ...

    2. 并查集 (Union-Find Sets)及其应用

      定义 并查集是一种树型的数据结构,用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.常常在使用中以森林来表示. 集就是让每个元素构成一个单元素的集合,也就是按一定顺序将属于同一组的 ...

    3. 喵哈哈村的魔法考试 Round #9 (Div.2) 题解

      A题 喵哈哈村的数据筛选游戏 题解:这道题签到题,拿个数组记录一下这个数是否出现过即可. #include<bits/stdc++.h> using namespace std; cons ...

    4. python 安装pip setuptools

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

    5. Linux下刷新DNS缓存（Ubuntu/CentOS）

      现在很多Linux发行版都没有内置DNS本地缓存,Linux不像Windows那样可以使用ipconfig /flushdns来刷新,在Linux下无需刷新,因为本身没有缓存: 当然,如果非要缓存刷新 ...

    6. AngualrJS中每次$http请求时的一个遮罩层Directive

      在AngualrJS中使用$http每次向远程API发送请求,等待响应,这中间有些许的等待过程.如何优雅地处理这个等待过程呢? 如果我们在等待过程中弹出一个遮罩层,会是一个比较优雅的做法. 这就涉及到 ...

    7. Oracle EBS 12.2.6 on VirtualBox

      Back in May, Oracle announced the general availability of Oracle VM Virtual Appliance for E-Business ...

    8. Knockout.Js官网学习（options绑定）

      前言 options绑定控制什么样的options在drop-down列表里(例如:<select>)或者 multi-select 列表里 (例如:<select size='6' ...

    9. Go语言之高级篇beego框架之controller调用model

      一.controller调用model 开发规范,就该把对数据库的操作写在model文件夹中. 示例: views/main.go package main import ( _ "web/ ...

    10. 在 Visual Studio 2010 中配置SharpPcap

      最近需要在C#下写一个抓取ARP包的程序,网上找来找去,在C#下只能用SharpPcap来做了.SharpPcap是作者把winPcap用C#重新封装而来的,详细信息见如下的链接. SharpPcap ...