表格和js连用实例文档格式.docx
《表格和js连用实例文档格式.docx》由会员分享，可在线阅读，更多相关《表格和js连用实例文档格式.docx（10页珍藏版）》请在冰豆网上搜索。
0auto;
width:
500px;
height:
border:
1pxsolidred;
"
>
/div>
/body>
/html>
scripttype="
text/javascript"
function$（id）{returndocument.getElementById（id）;
}
varrow=4;
varcol=4;
varwidth=96;
varheight=96;
varisIE=false;
varisFF=false;
vararr=[];
vartmp_from=[];
vartmp_to=[];
functionDragClass（id,x,y）{//dragclass
this.id=id;
this.posX=x;
this.posY=y;
this.type=0;
//1:
col2:
row3:
table4:
head
this.obj=null;
this.color=null;
this.px=null;
this.py=null;
DragClass.prototype.init=function（）{
if（this.type==1）{
this.color="
blue"
;
this.obj.style.background=this.color;
this.obj.style.color="
yellow"
this.start（）;
elseif（this.type==2）{
green"
elseif（this.type==3）{
red"
this.obj.style.background="
else{
black"
this.obj.innerHTML="
固定表头"
this.obj.style.color='
white'
};
DragClass.prototype.start=function（）{
varself=this;
this.obj.onmousedown=function（e）{
e=e||window.event;
if（self.type==3）{
self.px=get_xy（e）[0]-self.posX;
self.py=get_xy（e）[1]-self.posY;
self.changeStyle（）;
}
elseif（self.type==1）{
tmp_from=get_tmp（1,self.id.split（'
_'
）[1]）;
for（variintmp_from）{
tmp_from[i].px=get_xy（e）[0]-tmp_from[i].posX;
tmp_from[i].py=get_xy（e）[1]-tmp_from[i].posY;
tmp_from[i].changeStyle（）;
}
elseif（self.type==2）{
tmp_from=get_tmp（2,self.id.split（'
）[0]）;
document.onmousemove=function（e）{
self.move（e）;
returnfalse;
};
document.onmouseup=function（e）{
self.stop（e）;
returnfalse;
};
DragClass.prototype.move=function（e）{
if（this.type==3）{
this.obj.style.left=（get_xy（e）[0]-this.px）+'
px'
this.obj.style.top=（get_xy（e）[1]-this.py）+'
elseif（this.type==1||this.type==2）{
for（variintmp_from）{
tmp_from[i].obj.style.left=（get_xy（e）[0]-tmp_from[i].px）+'
tmp_from[i].obj.style.top=（get_xy（e）[1]-tmp_from[i].py）+'
DragClass.prototype.stop=function（e）{
this.check（get_xy（e）[0],get_xy（e）[1]）;
this.changeStyleBack（）;
for（variintmp_from）{
tmp_from[i].changeStyleBack（）;
document.onmousemove=null;
document.onmouseup=null;
DragClass.prototype.changeStyle=function（）{
this.obj.style.background="
lightgray"
this.obj.style.zIndex="
1"
DragClass.prototype.changeStyleBack=function（）{
this.obj.style.background=this.color;
this.obj.style.zIndex='
0'
DragClass.prototype.check=function（x,y）{//checksingle
varflag=true;
varflags=true;
for（varkeyinarr）{
vari=arr[key].id.split（"
_"
）[0];
varj=arr[key].id.split（"
）[1];
if（this.type==3&
&
arr[key].type==3）{
if（x<
30+j*100+width&
x>
30+j*100&
y<
30+i*100+height&
y>
30+i*100）{
this.table_each（arr[key]）;
flag=false;
break;
elseif（this.type==1&
arr[key].type==1）{
tmp_to=get_tmp（1,j）;
if（tmp_to.length==tmp_from.length）{
//alert（'
ok'
）;
for（varii=0;
ii<
tmp_to.length;
ii++）{
tmp_from[ii].table_each（tmp_to[ii]）;
}
}
flags=false;
elseif（this.type==2&
arr[key].type==2）{
tmp_to=get_tmp（2,i）;
if（flag）{
this.obj.style.left=this.posX+'
this.obj.style.top=this.posY+'
if（flags）{
for（varxintmp_from）{
tmp_from[x].obj.style.left=tmp_from[x].posX+'
tmp_from[x].obj.style.top=tmp_from[x].posY+'
DragClass.prototype.table_each=function（o）{//交换
varpx=this.posX;
varpy=this.posY;
varid=this.id;
this.posX=o.posX;
this.posY=o.posY;
this.id=o.id;
o.id=id;
o.posX=px;
o.posY=py;
this.obj.style.left=this.posX+'
this.obj.style.top=this.posY+'
o.obj.style.left=o.posX+'
o.obj.style.top=o.posY+'
functioninit（）{
varfrag=document.createDocumentFragment（）;
//createfragment
for（vari=0;
i<
row;
i++）{
for（varj=0;
j<
col;
j++）{
varspan=document.createElement（"
span"
span.className="
mil"
span.style.position="
absolute"
span.style.width=width+'
span.style.height=height+'
span.style.top=30+i*100+'
span.style.left=30+j*100+'
span.id=i+'
+j;
varobj=newDragClass（span.id,30+j*100,30+i*100）;
obj.obj=span;
arr.push（obj）;
if（i==0&
j==0）{//head
obj.type=4;
elseif（i==0）{//colhead
span.innerHTML="
列头"
obj.type=1;
elseif（j==0）{//rowhead
行头"
+i;
obj.type=2;
else{
表格"
+i+"
obj.type=3;
obj.init（）;
frag.appendChild（span）;
}
$（'
main'
）.appendChild（frag）;
functionget_tmp（type,i）{
vartmp=[];
for（varxinarr）{
if（type==1）{
if（arr[x].id.split（'
）[1]==i）{
tmp.push（arr[x]）;
else{
）[0]==i）
tmp.sort（function（a,b）{//ascsort
varax=a.id.split（'
varay=a.id.split（'
varbx=b.id.split（'
varby=b.id.split（'
if（ax<
bx||ay<
by）
return1;
else
return-1;
}）
returntmp;
functionget_xy（e）{//getmouse
e=e||window.event;
vararr=[];
varx=e.pageX||e.clientX;
vary=e.pageY||e.clientY;
x=x-$（'
）.offsetLeft;
arr[0]=x;
arr[1]=y;
returnarr;
window.onload=function（）{
init（）;
/script>
升级会员 