表格拖拽调整-优快云博客

本文链接：https://blog.youkuaiyun.com/mycss/article/details/1542567

<HTML>

<HEAD>

</HEAD>

<style>

body...{font-size:12}

table,input,button,select,textarea,b...{font-size:12;font-family:宋体}

body...{background:#ECE9D8}

td...{border:1px solid #c0c0c0;display:inline}

.GridBorder...{background:#ece9d8;border:1px solid #000;border-top:1px solid #FFF;border-left:1px solid #FFF;text-align:center;WORD-BREAK:break-all}

</style>

<scrīpt>

if(document.all)...{

Event.prototype.__defineGetter__("srcElement",function()...{var node=this.target;while(node.nodeType!=1)...{node=node.parentNode}return node})

Event.prototype.__defineGetter__("x",function()...{return this.clientX+2})

Event.prototype.__defineGetter__("y",function()...{return this.clientY+2})

}

function $(obj)...{return document.getElementById(obj)}

</scrīpt>

<BODY>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</BODY>

</HTML>

<scrīpt>

var ōbj=$("datagrid"),td

var body=document.body

var DragObj=null

var ōbjxy=getxy(obj)

var Dragborder=0

obj.style.cssText="background:#FFF;border-collapse:collapse"

for(var i=0;i<obj.rows.length;i++)...{

for(var j=0;j<obj.rows[i].cells.length;j++)...{

td=obj.rows[i].cells[j]

if(i==0)...{

td.className="GridBorder"

td.style.cssText="font-weight:bold"

}else if(j==0)...{

td.className="GridBorder"

td.style.cssText="width:15px"

}else...{

td.innerHTML="<input type=text value='"+td.innerHTML.replace(/ /gi,'')+"' style='width:100%;border:0px'>"

}

var focus_img=document.createElement("IMG")

focus_img.src="http://bbs.51js.com/attachment.php?aid=7290&noupdate=yes"

if(typeof(Dline)!="object")...{

var Dragline=document.createElement("DIV")

Dragline.id="Dline"

Dragline.style.cssText="width:1px;border-left:1px solid #CCC;display:none;position:absolute"

body.appendChild(Dragline)

}

obj.onclick=function()...{

var e=event,tr

var ee=e.srcElement

if(ee.tagName=="INPUT")...{

tr=ee.parentNode.parentNode

obj.rows[tr.rowIndex].cells[0].appendChild(focus_img)

}

obj.onmousemove=function()...{

var e=event,tr

var ee=e.srcElement

if(ee.tagName=="TD"&&ee.parentNode.rowIndex==0&&ee.cellIndex>0)...{

var a=getxy(ee)

if(event.x<(a[1]+5)||event.x>(a[1]+a[2]-5))...{

body.style.cursor="col-resize"

ōbjxy=getxy(obj)

}else...{

body.style.cursor="default"

}

obj.onmousedown=function()...{

var e=event

var ee=e.srcElement

var a=getxy(ee)

if(body.style.cursor=="col-resize")...{

if(event.x<(a[1]+5))

Dragborder=1

else if(event.x>(a[1]+a[2]-5))

Dragborder=2

else

Dragborder=0

DragObj=ee

$("Dline").style.left=e.x

$("Dline").style.top=objxy[0]

$("Dline").style.height=objxy[3]

$("Dline").style.display=""

}

body.onmousemove=function()...{

if(DragObj!=null)...{

$("Dline").style.left=event.x

body.style.cursor="col-resize"

}

body.onmouseup=function()...{

if(DragObj!=null)...{

$("Dline").style.display="none"

body.style.cursor="default"

if(Dragborder==2)...{

var a=getxy(DragObj)

var w=event.x-a[1]

w=w<=0?0:w

DragObj.style.width=w

}

if(Dragborder==1)...{

var pnode=DragObj.previousSibling

var a=getxy(pnode)

var w=event.x-a[1]

w=w<=0?0:w

pnode.style.width=w

}

DragObj=null

}

function getxy(e)...{

var a=new Array()

var t=e.offsetTop;

var l=e.offsetLeft;

var w=e.offsetWidth;

var h=e.offsetHeight;

while(e=e.offsetParent)...{

t+=e.offsetTop;

l+=e.offsetLeft;

}

a[0]=t;a[1]=l;a[2]=w;a[3]=h

return a;

}

</scrīpt>

js原创htm数据表格