提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery 改变 表格 兼容 拖拽 列宽
2023-06-13 09:15:45 时间

本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>

相关文章