jQuery表格列宽可拖拽改变且兼容firfox
本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局。使用jQuery,方便函数的调用,给要处理的表格添加id后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性。
代码如下:
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> <mce:scripttype="text/javascript"src="jquery-1.3.2.min.js"mce_src="jquery-1.3.2.min.js"></mce:script> <mce:style><!-- .resizeDivClass { position:absolute; background-color:gray; width:2px; height:15px; z-index:1px; display:block; cursor:e-resize } .td1{ font-size:12px; white-space:nowrap; color:#0000ff; } --></mce:style><stylemce_bogus="1">.resizeDivClass { position:absolute; background-color:gray; width:2px; height:15px; z-index:1px; display:block; cursor:e-resize } .td1{ font-size:12px; white-space:nowrap; color:#0000ff; }</style> <mce:scriptlanguage=javascript><!-- /* 标题:扩拖拽列表格demo1.2 设计:卢松强 博客:http://hi.csdn.net/andensy 日期:2010年4月26日 说明:修改了firfox兼容性问题,可以很好的兼容火狐浏览器 */ /* 依赖于jQuery */ (function($){ //用正则表达式判断jQuery的版本 if(/1/.(0|1|2)/.(0|1|2|3|4|5)/.test($.fn.jquery)||/^1.1/.test($.fn.jquery)){ alert('movedTh需要jQueryv1.2.6以后版本支持!你正使用的是v'+$.fn.jquery); return; } me=null; varps=3; $.fn.movedTh=function(){ me=this; vartarget=null; vartempStr=""; vari=0; $(me).find("tr:first").find("th").each(function(){ tempStr='<divid="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"></div>'; vardiv={}; $(this).html($(this).html()+tempStr); varoffset=$(this).offset(); varpos=offset.left+$(this).width()+me.offset().left-ps; $("#mydiv"+i).addClass("resizeDivClass"); $("#mydiv"+i).css("left",pos); $("#mydiv"+i).css("top",(offset.top+2)); i++; });//endeach }//endmoveTh $.fn.mousedone={ movedown:function(e,obj){ vard=document; vare=window.event||e; varmyX=e.clientX||e.pageX; obj.mouseDownX=myX; obj.pareneTdW=$(obj).parent().width();//obj.parentElement.offsetWidth; obj.pareneTableW=me.width(); if(obj.setCapture){ obj.setCapture(); }elseif(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } d.onmousemove=function(e){ vardragData=obj; varevent=window.event||e; if(!dragData.mouseDownX)returnfalse; varnewWidth=dragData.pareneTdW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX; if(newWidth>0) { $(obj).parent().width(newWidth); me.width(dragData.pareneTableW*1+(event.clientX||event.pageX)*1-dragData.mouseDownX); vark=0; me.find("tr:first").find("th").each(function(){ varoffset=$(this).offset(); varpos=offset.left*1+$(this).width()*1+me.offset().left*1-ps; $("#mydiv"+k).css("left",pos); k++; })//endeach }//endif }; d.onmouseup=function(e){ vardragData=obj; if(dragData.setCapture) { dragData.releaseCapture(); }elseif(window.captureEvents){ window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP); } dragData.mouseDownX=0; } } }//endmousedone $(window).resize(function(){ setTimeout(function(){ vartarget=null; vartempStr=""; vari=0; $(me).find("tr:first").find("th").each(function(){ tempStr='<divid="mydiv'+i+'"onmousedown="$().mousedone.movedown(event,this)"></div>'; vardiv={}; $(this).html($(this).html()+tempStr); varoffset=$(this).offset(); varpos=offset.left+$(this).width()+me.offset().left-ps; $("#mydiv"+i).addClass("resizeDivClass"); $("#mydiv"+i).css("left",pos); i++; });//endeach },10); }); })(jQuery) $().ready(function(){ $("#tab").movedTh(); }) //--></mce:script> </head> <bodyonload=""> <tablecellpadding="3"id=''STYLE="table-layout:fixed;"mce_STYLE="table-layout:fixed;"> <trbgcolor=cccccc> <thvalign=topclass="td1"><nobr>改变table的列宽度改</nobr><spanstyle="color:#069"mce_style="color:#069">|</span></th> <thvalign=topclass="td1"><nobr>改变table的列宽度改</nobr><spanstyle="color:#069"mce_style="color:#069">|</span></th> </tr></table> <br> <tablecellpadding="3"id='tab'STYLE="table-layout:fixed;"mce_STYLE="table-layout:fixed;"> <trbgcolor=cccccc> <thvalign=topclass="td1"><nobr>改变table的列宽度改</nobr></th> <thvalign=topclass="td1"><nobr>改变table的列宽度改</nobr></th> <thvalign=topclass="td1"><nobr>改变table的列宽度改</nobr></th> <thvalign=topclass="td1"><nobr>改变table的列宽度改</nobr></th> <thvalign=topclass="td1"><nobr>改变table的列宽度改</nobr></th> <thvalign=topclass="td1"><nobr>改变table的列宽度改</nobr></th> </tr> <tr> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> </tr> <tr> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> </tr> <tr> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> </tr> <tr> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> <tdclass="td1"><nobr>改变table的列宽度</nobr></td> </tr> </table> </body> </html>