JS实现可改变列宽的table实例


Posted in Javascript onJuly 02, 2013
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="gbk"> 
<title>table</title> 
</head> 
<body> 
<table id="tb_1" cellspacing="0" cellpadding="2" width="100%" border="1"> 
<tbody> 
<tr align="center" bgcolor="#dcdcdc"> 
<td style="width:100px;">用户编号</td> 
<td>试用时间</td><td>转正时间</td><td>性别</td><td>姓名拼音</td> 
<td>生日时间</td><td>民族</td><td>身高</td> 
</tr> 
<tr> 
<td>2000001</td> 
<td>1997-3-13</td><td>1997-3-13</td><td>1</td><td>WZJ</td> 
<td>1965-3-13</td><td>汉</td><td>171</td> 
</tr> 
<tr> 
<td>2000045</td> 
<td>2001-2-15</td><td>2001-3-15</td><td>0</td><td>WY</td> 
<td>1978-8-5</td><td>汉</td><td>162</td> 
</tr> 
<tr> 
<td>2000046</td> 
<td>2001-2-23</td><td>2001-3-23</td><td>0</td><td>LQ</td> 
<td>2001-2-23</td><td>汉</td><td>171</td> 
</tr> 
</tbody> 
</table> 
<script type="text/javascript"> 
var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 
var table = document.getElementById("tb_1"); 
for (j = 0; j < table.rows[0].cells.length; j++) { 
table.rows[0].cells[j].onmousedown = function () { 
//记录单元格 
tTD = this; 
if (event.offsetX > tTD.offsetWidth - 10) { 
tTD.mouseDown = true; 
tTD.oldX = event.x; 
tTD.oldWidth = tTD.offsetWidth; 
} 
//记录Table宽度 
//table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement; 
//tTD.tableWidth = table.offsetWidth; 
}; 
table.rows[0].cells[j].onmouseup = function () { 
//结束宽度调整 
if (tTD == undefined) tTD = this; 
tTD.mouseDown = false; 
tTD.style.cursor = 'default'; 
}; 
table.rows[0].cells[j].onmousemove = function () { 
//更改鼠标样式 
if (event.offsetX > this.offsetWidth - 10) 
this.style.cursor = 'col-resize'; 
else 
this.style.cursor = 'default'; 
//取出暂存的Table Cell 
if (tTD == undefined) tTD = this; 
//调整宽度 
if (tTD.mouseDown != null && tTD.mouseDown == true) { 
tTD.style.cursor = 'default'; 
if (tTD.oldWidth + (event.x - tTD.oldX)>0) 
tTD.width = tTD.oldWidth + (event.x - tTD.oldX); 
//调整列宽 
tTD.style.width = tTD.width; 
tTD.style.cursor = 'col-resize'; 
//调整该列中的每个Cell 
table = tTD; while (table.tagName != 'TABLE') table = table.parentElement; 
for (j = 0; j < table.rows.length; j++) { 
table.rows[j].cells[tTD.cellIndex].width = tTD.width; 
} 
//调整整个表 
//table.width = tTD.tableWidth + (tTD.offsetWidth ? tTD.oldWidth); 
//table.style.width = table.width; 
} 
}; 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
优化JavaScript脚本的性能的几个注意事项
Dec 22 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
js 图片随机不定向浮动的实现代码
Jul 02 #Javascript
js猜数字小游戏的简单实现代码
Jul 02 #Javascript
jQuery中获取Radio元素值的方法
Jul 02 #Javascript
js网页版计算器的简单实现
Jul 02 #Javascript
js实现广告漂浮效果的小例子
Jul 02 #Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 #Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 #Javascript
You might like
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP 类与构造函数解析
2017/02/06 PHP
php实现数字补零的方法总结
2018/09/12 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
Python 错误和异常小结
2013/10/09 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python 接收处理外带的参数方法
2018/12/03 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python输出数学符号实例
2020/05/11 Python
python接入支付宝的实例操作
2020/07/20 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
求职信名称怎么写
2014/05/26 职场文书
商务代表岗位职责
2015/02/15 职场文书
党员身份证明材料
2015/06/19 职场文书
欠款证明
2015/06/24 职场文书
同学会演讲稿
2019/04/02 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
Javascript webpack动态import
2022/04/19 Javascript