脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 →

写的htc的数据表格

 更新时间：2007年01月20日 00:00:00   作者：  
作者: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>

相关文章

  • 微信小程序实现手势解锁的示例详解

    微信小程序实现手势解锁的示例详解

    手势解锁是生活中常用的解锁方式，本文将通过微信小程序实现手势解锁这一功能，本实例以工具的形式可以嵌入到不同的项目之中，感兴趣的可以了解一下
    2022-04-04
  • JavaScript的String字符串对象常用操作总结

    JavaScript的String字符串对象常用操作总结

    String对象用于存储字符串数据,这里我们做了JavaScript的String字符串对象常用操作总结,需要的朋友可以参考下
    2016-05-05
  • JavaScript中json对象和string对象之间相互转化

    JavaScript中json对象和string对象之间相互转化

    json对象和string对象之间的转化已经成为了大家耳熟能详的话题，本人今天就多啰嗦一些他们之间的故事，如有不对之处，还请各位海涵呢？不多说了直切主题
    2012-12-12
  • 原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

    原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

    同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块，需要的朋友可以参考下。
    2011-01-01
  • webpack的pitching loader详解

    webpack的pitching loader详解

    这篇文章主要介绍了webpack的pitching loader详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 微信小程序实现商品属性联动选择

    微信小程序实现商品属性联动选择

    这篇文章主要为大家详细介绍了微信小程序实现商品属性联动选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-02-02
  • HTML DOM的nodeType值介绍

    HTML DOM的nodeType值介绍

    将HTML DOM中几个容易常用的属性做下记录，需要的朋友可以参考下。
    2011-03-03
  • 详谈commonjs模块与es6模块的区别

    详谈commonjs模块与es6模块的区别

    下面小编就为大家带来一篇详谈commonjs模块与es6模块的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 小程序文字跑马灯效果

    小程序文字跑马灯效果

    这篇文章主要为大家详细介绍了小程序文字跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JS实现多功能计算器

    JS实现多功能计算器

    这篇文章主要为大家详细介绍了JS实现多功能计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10

最新评论