表格列宽鼠标拖动

马嘉楠 2009-03-03

共同学习，欢迎转载。转载请注明地址【http://blog.csdn.net/majianan/archive/2009/03/03/3952649.aspx 】，谢谢O(∩_∩)O！

/******************************************
* 没有版权任意修改改好了请发给我一份 O(∩_∩)O
* Email：jianan.ma@gmail.com
* QQ:52524611
*******************************************/

功能：1）鼠标拖动列宽。2）双击恢复列宽

<HTML> <HEAD> <TITLE>表格列宽鼠标拖动</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> </HEAD> <mce:style></mce:style><style mce_bogus="1"> .line{ position:absolute; width:1px; height:100px; background-color:#000000; } table { border-collapse: collapse; border: 1 solid; padding-left: 100px; } thead td { background: #c0c0c0; cursor: col-resize; height: 16px; text-align: center; } td div { cursor: default; } td { font:menu; padding: 5px; border: 1px solid; text-align: center; }</style> <mce:script language="javascript"></mce:script> <BODY> <table id="resizeTable" onselectstart="return false;" > <thead> <tr> <td name="headTd" data="姓名" ondblclick="restoreTD()" onmousedown="ResizeTd(this)"><div>姓名</div></td> <td name="headTd" data="性别" ondblclick="restoreTD()" onmousedown="ResizeTd(this)"><div>性别</div></td> <td name="headTd" data="电话" ondblclick="restoreTD()" onmousedown="ResizeTd(this)"><div>电话</div></td> <td name="headTd" data="住址" ondblclick="restoreTD()" onmousedown="ResizeTd(this)"><div>住址</div></td> <td name="headTd" data="面貌" ondblclick="restoreTD()" onmousedown="ResizeTd(this)"><div>政治面貌</div></td> <td name="headTd" data="学历" ondblclick="restoreTD()" onmousedown="ResizeTd(this)"><div>学历</div></td> <td name="headTd" data="备注" ondblclick="restoreTD()" onmousedown="ResizeTd(this)"><div>备注</div></td> </tr> </thead> <tbody> <mce:script language="javascript"></mce:script> </tbody> </table> </BODY> </HTML>

马嘉楠
jianan.ma@gmail.com

posted on 2009-03-03 14:04 马嘉楠阅读(2224) 评论(2) 编辑收藏所属分类: SoureCode 、Java Script

常用链接

留言簿(5)

随笔分类(62)

随笔档案(120)

JavaScript

个人博客

技术网站

有一只企鹅叫Linux

有一部咖啡叫Java

有一部经典叫C++

系列文章

经典Blog

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: 表格列宽鼠标拖动【JavaScript】悬浮窗口【JavaScript】列表（Select）选项（Option）的移动（上下左右）【原】CSS+JavaScript 实现TabPane页签【原】【JavaScript】列表元素上下左右移动：Select和Option的应用【原创】CSS+JavaScript 实现菜单功能--改进版 Print Fibonacci Sequcnce 简单的密码验证控件蛇行填数一道很简单的老问题，求更好的解决方法