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>