本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. 20172302 《Java软件结构与数据结构》实验二：树实验报告

      课程:<Java软件结构与数据结构> 班级: 1723 姓名: 侯泽洋 学号:20172302 实验教师:王志强老师 实验日期:2018年11月5日 必修/选修: 必修 实验内容 (1)参 ...

    2. MySql md5加密 sqlserver md5加密 C# md5加密 java md5加密

      便民md5加密: 百度md5加密: MySQL 加密语法: MD5(加密字符串) -- 中文加密 SELECT MD5('你好') -- 中文加密匹配查询 SELECT * FROM 表名 WHERE ...

    3. 关于Mysql安装启动的若干问题解决

      Mysql由于其免费,高效的特点一直是大学,培训班的主力数据库管理软件.但是对于初学者而言可能没有那么友好,一是没有windows软件通用的那套可视化操作,基本上初期在不搭配navicat的状态下只能 ...

    4. JSON序列——主从表查询

      JSON序列——主从表查询 客户端代码: procedure TForm1.Button4Click(Sender: TObject); // 主从表 查询 begin var url: TynUrl ...

    5. python测试开发django-47.xadmin上传图片和文件

      前言 xadmin上传图片和上传文件功能 依赖环境 如果没安装Pillow的话,会有报错:practise.Upload.upload_image: (fields.E210) Cannot use ...

    6. Altium Designer 13 安装完整元件库

      Altium Designer更新的非常快,都快赶上chrome了,13出来没多久14又出来了,之前一直用AD9.4,算是10之前的最后一个版本,也是很经典的一个版本.安装新版本后看到在目录结构上有些 ...

    7. 使用three.js写全景图，使用sprite类canvas，结合射线，点击跳转指定全景图【转】

      https://blog.csdn.net/WDCCSDN/article/details/81214804 话不多说上代码: 1.html: <!DOCTYPE html>    < ...

    8. .NET 并行编程——数据并行

      本文内容 并行编程 数据并行 环境 计算 PI 矩阵相乘 把目录中的全部图片复制到另一个目录 列出指定目录中的所有文件,包括其子目录 最近,对多线程编程,并行编程,异步编程,这三个概念有点晕了,之前我 ...

    9. 病毒木马查杀实战第020篇：Ring3层主动防御之基本原理

      前言 假设说我们的计算机中安装有杀毒软件,那么当我们有意或无意地下载了一个恶意程序后.杀软一般都会弹出一个对话框提示我们,下载的程序非常可能是恶意程序,建议删除之类的.或者杀软就不提示.直接删除了:或 ...

    10. ubuntu 安装JDK1.6(jdk-6u45-linux-x64.bin)

      ubuntu 安装JDK1.6 首先在官网下载JKD1.6 linux的版本:http://www.oracle.com/technetwork/java/javasebusiness/downloa ...