写的htc的数据表格


Posted in Javascript onJanuary 20, 2007

作者: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(/ /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>
Javascript 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
js Date概念详细介绍
Nov 22 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
共享自己写一个框架DreamScript
Jan 20 #Javascript
javascript读取RSS数据
Jan 20 #Javascript
一个多次搜索+多次传值的解决方案
Jan 20 #Javascript
短信提示使用 特效
Jan 19 #Javascript
通过JAVAScript实现页面自适应
Jan 19 #Javascript
Javascript----文件操作
Jan 18 #Javascript
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 #Javascript
You might like
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP中的类型约束介绍
2015/05/11 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python线性插值解析
2020/07/05 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
打造完美自荐信
2014/01/24 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Node实现搜索框进行模糊查询
2021/06/28 Javascript
Python 中的Sympy详细使用
2021/08/07 Python
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫