<
HTML
>
< HEAD >
< TITLE ></ TITLE >
</ 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 >
< table id = datagrid >
< tr >
< td width = 15 ></ td >
< td width = 50 > 字段一 </ td >
< td width = 50 > 字段二 </ td >
< td width = 50 > 字段三 </ td >
< td width = 50 > 字段四 </ td >
< td width = 50 > 字段五 </ td >
< td width = 50 > 字段六 </ td >
< td width = 50 > 字段七 </ td >
< td width = 50 > 字段八 </ td >
< td width = 50 > 字段九 </ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ 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 >
< HEAD >
< TITLE ></ TITLE >
</ 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 >
< table id = datagrid >
< tr >
< td width = 15 ></ td >
< td width = 50 > 字段一 </ td >
< td width = 50 > 字段二 </ td >
< td width = 50 > 字段三 </ td >
< td width = 50 > 字段四 </ td >
< td width = 50 > 字段五 </ td >
< td width = 50 > 字段六 </ td >
< td width = 50 > 字段七 </ td >
< td width = 50 > 字段八 </ td >
< td width = 50 > 字段九 </ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
</ 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 >