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 放大镜 移动镜片效果代码
May 09 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
js转义字符介绍
Nov 05 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
JS location几个方法小姐
2008/07/09 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python中的tcp示例详解
2018/12/09 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
企业项目策划书
2014/01/11 职场文书
探亲邀请信范文
2014/01/30 职场文书
业务员自荐信范文
2014/04/20 职场文书
企业消防安全责任书
2014/07/23 职场文书
交通事故协议书范文
2014/10/23 职场文书
单位介绍信格式
2015/01/31 职场文书
毕业实习感受与体会
2015/05/26 职场文书
我的1919观后感
2015/06/03 职场文书
电影圆明园观后感
2015/06/03 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
python数字转对应中文的方法总结
2021/08/02 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
mysql函数之截取字符串的实现
2022/08/14 MySQL