表格和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>