<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<style>
BODY{FONT-SIZE:12}
Table,input,button,select,textarea,b{font-size:12;font-family: Song Body}
Body{background: #ECE9D8}
td{border:1px solid #c0c0c0;d Isplay: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>
<script>
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)}
</script>
<BODY>
<table id=datagrid>
<tr>
<TD width=15></td>
<TD width=50> Field a </td>
<TD width=50> Field Two </td>
<TD width=50> Field Three </td>
<TD width=50> Field Four </td>
<TD width=50> Field Five </td>
<TD width=50> Field Six </td>
<TD width=50> Field VII </td>
<TD width=50> Field Eight </td>
<TD width=50> Field Nine </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>
<script>
var obj=$ ("DataGrid"), TD
var body=document.body
var dragobj=null
var objxy=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;d Isplay: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"
Objxy=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;
}
</script>
