欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery表格列宽可拖拽改变且兼容firfox

程序员文章站 2022-06-11 18:13:22
本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>