本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. String、StringBuffer、StringBulider

      三者都实现了CharSequence接口,因此CharSequence可认为是一个字符串的协议接口 1.String类是不可变类,即一旦一个String对象被创建后,包含在这个对象中的字符序列是不可改 ...

    2. 正则表达式(特殊字符)/Xpath语法/CSS选择器

      正则表达式(特殊字符) ^ 开头 '^b.*'----以b开头的任意字符 $ 结尾 '^b.*3$'----以b开头,3结尾的任意字符 * 任意长度(次数),≥0 ? 非贪婪模式,非贪婪模式尽可能少的 ...

    3. DragonBones的下载和安装

      DragonBones也称龙骨,是一款骨骼动画制作软件.DragonBones Pro是由Flash的龙骨骨骼动画插件进化而来的,与传统逐帧动画相比,骨骼动画资源较小且动画效果比较好. DragonB ...

    4. Structured Streaming教程(2) —— 常用输入与输出

      上篇了解了一些基本的Structured Streaming的概念,知道了Structured Streaming其实是一个无下界的无限递增的DataFrame.基于这个DataFrame,我们可以做 ...

    5. [CGAL]带岛多边形三角化

      CGAL带岛多边形三角化,并输出(*.ply)格式的模型 模型输出的关键是节点和索引 #include <CGAL/Triangulation_vertex_base_with_id_2.h&g ...

    6. vim中delete（backspace）键不能向左删除

      MacOS修改为英文语言之后,忽然出现如题问题:delete键不能向左删除,只可以删除本次插入模式下插入的文本.原因: 转载:https://www.smslit.top/2016/11/27/vim ...

    7. Chromium OS 初体验

      Chromium OS可是早有耳闻,但是一直没有尝试,最近很多评论甚至认为会对Windows和Mac都能够造成压力,于是迫不及待的想尝试一下了,百度下了官网,官网很贴心,不光给了用于写入U盘的镜像文件 ...

    8. linux-批量杀死进程

      kill `ps -ef|grep 进程名 | grep -v grep|awk '{print $2}'` 例如: kill `ps -ef | grep /etc/pam.d/su |grep - ...

    9. Windows平台下tomcat 性能调优

      Tomcat 线程查看工具: https://blog.csdn.net/jrainbow/article/details/49026365 16G内存 Tomcat并发优化.内存配置.垃圾回收.宕机 ...

    10. 基于Centos7.5搭建Docker环境

      docker很火,基于容器化技术,实现一次编译到运行.实现运行环境+服务的一键式打包! 00.部署环境 centos7.5(基于vmware搭建的测试环境,可以跟互联网交互,桥接方式联网) docke ...