开发者社区> y0umer> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery表格列宽可变,兼容firfox

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

本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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
强烈推荐:240多个jQuery插件
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
955 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1016 0
推荐12款非常有用的流行 jQuery 插件
jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
867 0
40款非常棒的 jQuery 插件和制作教程(系列二)
jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
1086 0
40款非常棒的 jQuery 插件和制作教程(系列一)
jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
818 0
10款新鲜出炉的 jQuery 插件
 这篇文章与大家分享的是10款新鲜出炉的基于 jQuery 开发的 Ajax 插件,有幻灯片、图片画廊、菜单等很多有用的插件。这些作者的想法特别新颖,希望你能从中找到自己需要的插件。 1. Chrome Style jQuery Image Gallery 一款用于实现漂亮的Chrome风格图片画廊的 jQuery 插件,在线演示 2.
833 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
939 0
Could not find a valid gem &#39;rails&#39; (&gt;= 0), here is why
很长一段时间之前 Ruby Rails入门——windows下搭建Ruby Rails Web开发环境 ,由于后来将Ruby的安装文件从 C 盘移动到了 D 盘,也修改了 Path 环境变量,ruby 和 gem 命令都能使用,但是 rails 命令无法使用了,所以执行以下命令重新安装: ge...
859 0
+关注
y0umer
高级网络安全技术员
904
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载