写的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 相关文章推荐
js中apply方法的使用详细解析
Nov 04 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
简述JS控制台的使用
2018/07/15 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
python按照多个条件排序的方法
2019/02/08 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
经管应届生求职信范文
2014/05/18 职场文书
企业环保标语
2014/06/10 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers