Author: xmg (MA Ge)
Copy codeThe Code is as follows:
<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>
<Script>
If (document. all ){
Event. prototype. _ defineGetter _ ("srcElement", function () {var node1_this.tar get; 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 1 </td>
<Td width = 50> Field 2 </td>
<Td width = 50> Field 3 </td>
<Td width = 50> Field 4 </td>
<Td width = 50> Field 5 </td>
<Td width = 50> Field 6 </td>
<Td width = 50> Field 7 </td>
<Td width = 50> Field 8 </td>
<Td width = 50> Field 9 </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.css Text = "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.css Text = "font-weight: bold"
} Else if (j = 0 ){
Td. className = "GridBorder"
Td.style.css Text = "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.css Text = "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"
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. previussibling
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;
}
</Script>