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支持的最大递归调用次数分析
Jun 24 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
javascript实现行拖动的方法
May 27 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 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
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Tornado 多进程实现分析详解
2018/01/12 Python
python在不同条件下的输入与输出
2020/02/13 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
留学自荐信写作方法
2014/01/27 职场文书
致全体运动员广播稿
2014/02/01 职场文书
暑期社会实践感言
2014/02/25 职场文书
车队司机自我鉴定
2014/03/02 职场文书
食品安全承诺书范文
2014/08/29 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers