写的htc的数据表格

时间：2020-11-08 12:35:00|栏目：JavaScript代码|点击：次
作者:xmg (小马哥)
 
<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 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>字段一</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> 
 
<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(/&nbsp;/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" 
 
            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>
上一篇：List all the Databases on a SQL Server
栏目：JavaScript代码
下一篇：动态加载JS文件的三种方法
本文标题：写的htc的数据表格
本文地址：http://www.codeinn.net/misctech/20390.html
更多JavaScript代码
JavaScript代码

写的htc的数据表格

阅读排行

推荐教程
