jQuery表格列宽可拖拽改变且兼容firfox
程序员文章站
2023-11-03 18:50:04
本demo使用jquery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局。使用jquery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id...
本demo使用jquery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局。使用jquery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedth()即可方便实现,修改了firfox的兼容性。
代码如下:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <mce:script type="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><style mce_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:script language=javascript><!-- /* 标题:扩拖拽列表格demo 1.2 设计:卢松强 博客:https://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 需要 jquery v1.2.6 以后版本支持! 你正使用的是 v' + $.fn.jquery); return; } me=null; var ps=3; $.fn.movedth=function(){ me=this; var target = null; var tempstr = ""; var i=0; $(me).find("tr:first").find("th").each(function(){ tempstr = '<p id="myp'+i+'"onmousedown="$().mousedone.movedown(event,this)" ></p>'; var p={}; $(this).html($(this).html()+tempstr); var offset = $(this).offset(); var pos=offset.left +$(this).width()+ me.offset().left-ps; $("#myp"+i).addclass("resizedivclass"); $("#myp"+i).css("left",pos); $("#myp"+i).css("top",(offset.top+2)); i++; }); //end each } //end moveth $.fn.mousedone={ movedown:function(e,obj){ var d=document; var e = window.event||e ; var myx = e.clientx||e.pagex; obj.mousedownx=myx ; obj.parenetdw=$(obj).parent().width(); //obj.parentelement.offsetwidth; obj.parenetablew=me.width(); if(obj.setcapture){ obj.setcapture(); }else if(window.captureevents){ window.captureevents(event.mousemove|event.mouseup); } d.onmousemove=function(e){ var dragdata=obj; var event = window.event||e ; if(!dragdata.mousedownx) return false; var newwidth=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); var k=0; me.find("tr:first").find("th").each(function(){ var offset = $(this).offset(); var pos=offset.left*1+$(this).width()*1+me.offset().left*1-ps; $("#myp"+k).css("left",pos); k++; }) //end each }//end if }; d.onmouseup=function(e){ var dragdata=obj; if(dragdata.setcapture) { dragdata.releasecapture(); }else if(window.captureevents){ window.releaseevents(e.mousemove|e.mouseup); } dragdata.mousedownx=0; } } } //end mousedone $(window).resize(function(){ settimeout(function() { var target = null; var tempstr = ""; var i=0; $(me).find("tr:first").find("th").each(function(){ tempstr = '<p id="myp'+i+'"onmousedown="$().mousedone.movedown(event,this)" ></p>'; var p={}; $(this).html($(this).html()+tempstr); var offset = $(this).offset(); var pos=offset.left +$(this).width()+ me.offset().left-ps; $("#myp"+i).addclass("resizedivclass"); $("#myp"+i).css("left",pos); i++; }); //end each }, 10); }); })(jquery) $().ready(function(){ $("#tab").movedth(); }) // --></mce:script> </head> <body onload=""> <table cellpadding="3" id='' style="table-layout:fixed;" mce_style="table-layout:fixed;" > <tr bgcolor=cccccc > <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th> <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr><span style="color:#069" mce_style="color:#069">|</span></th> </tr></table> <br> <table cellpadding="3" id='tab' style="table-layout:fixed;" mce_style="table-layout:fixed;" > <tr bgcolor=cccccc > <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> <th valign=top class="td1" ><nobr>改变table的列宽度改</nobr></th> </tr> <tr> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> </tr> <tr> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> </tr> <tr>gt; <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> </tr> <tr> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> <td class="td1"><nobr>改变table的列宽度</nobr></td> </tr> </table> </body> </html>