表格和js连用实例文档格式.docx

1、0 auto;width:500px;height:border:1px solid red; /div/body/htmlscript type=text/javascriptfunction $（id）return document.getElementById（id）;var row = 4; var col = 4;var width = 96;var height = 96;var isIE = false;var isFF = false;var arr = ;var tmp_from = ;var tmp_to = ;function DragClass（id,x,y） /dra

2、g class this.id = id; this.posX = x; this.posY = y; this.type = 0; /1:col 2:row 3:table 4: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 =

3、yellow this.start（）; else if（this.type = 2）green else if（this.type = 3）red this.obj.style.background = elseblack this.obj.innerHTML = 固定表头 this.obj.style.color = white;DragClass.prototype.start = function（） var self = this; this.obj.onmousedown = function（e） e = e | window.event; if（self.type = 3） s

4、elf.px = get_xy（e）0-self.posX; self.py = get_xy（e）1-self.posY; self.changeStyle（）; else if（self.type = 1） tmp_from = get_tmp（1,self.id.split（_）1）; for（var i in tmp_from） tmp_fromi.px = get_xy（e）0-tmp_fromi.posX; tmp_fromi.py = get_xy（e）1-tmp_fromi.posY; tmp_fromi.changeStyle（）; else if（self.type = 2

5、） tmp_from = get_tmp（2,self.id.split（）0）; document.onmousemove = function（e） self.move（e）; return false; ; document.onmouseup = function（e） self.stop（e）; return false; ;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

6、（e）1-this.py）+ else if（this.type = 1 | this.type = 2） for（var i in tmp_from） tmp_fromi.obj.style.left = （get_xy（e）0-tmp_fromi.px）+ tmp_fromi.obj.style.top = （get_xy（e）1-tmp_fromi.py）+DragClass.prototype.stop = function（e） this.check（get_xy（e）0,get_xy（e）1）; this.changeStyleBack（）; for（var i in tmp_fr

7、om） tmp_fromi.changeStyleBack（）; document.onmousemove = null; document.onmouseup = null;DragClass.prototype.changeStyle = function（） this.obj.style.background = lightgray this.obj.style.zIndex = 1DragClass.prototype.changeStyleBack = function（） this.obj.style.background = this.color; this.obj.style.

8、zIndex = 0DragClass.prototype.check = function（x,y） /check single var flag = true; var flags = true; for（var key in arr） var i = arrkey.id.split（_）0; var j = arrkey.id.split（）1; if（this.type = 3 & arrkey.type = 3） if（x30+j*100 & y30+i*100） this.table_each（arrkey）; flag = false; break; else if（this.t

9、ype = 1 & arrkey.type = 1） tmp_to = get_tmp（1, j）; if（tmp_to.length = tmp_from.length） /alert（ok）; for（var ii=0; iitmp_to.length; ii+） tmp_fromii.table_each（tmp_toii）; flags = false; else if（this.type = 2 & arrkey.type = 2） tmp_to = get_tmp（2, i）; if（flag） this.obj.style.left = this.posX + this.obj.

10、style.top = this.posY + if（flags） for（var x in tmp_from） tmp_fromx.obj.style.left = tmp_fromx.posX+ tmp_fromx.obj.style.top = tmp_fromx.posY+DragClass.prototype.table_each = function（o） /交换 var px = this.posX; var py = this.posY; var id = this.id; this.posX = o.posX; this.posY = o.posY; this.id = o.

11、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+function init（） var frag = document.createDocumentFragment（）; /create fragment for（var i=0; irow; i+） for（var j=0; jcol; j+） var span = docu

12、ment.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; var obj = new DragClass（span.id, 30+j*100, 30+i*100）; obj.obj = span; arr.push（obj）; if（i=0 & j=0） /

13、head obj.type = 4; else if（i=0） / col head span.innerHTML = 列头 obj.type = 1; else if（j=0） / row head行头+i; obj.type = 2; else表格+i+ obj.type = 3; obj.init（）; frag.appendChild（span）; $（main）.appendChild（frag）;function get_tmp（type, i） var tmp = ; for（var x in arr） if（type = 1） if（arrx.id.split（）1 = i） tmp.push（arrx）; else）0 = i） tmp.sort（function（a,b） /asc sort var ax = a.id.split（ var ay = a.id.split（ var bx = b.id.split（ var by = b.id.split（ if（ax bx | ay