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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
js Dialog 实践分享
Oct 22 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php遍历数组的方法分享
2012/03/22 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
浅谈PHP封装CURL
2019/03/06 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
Scrapy的简单使用教程
2017/10/24 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python 切分数组实例解析
2019/11/07 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
会计专业大学生求职信范文
2014/01/28 职场文书
小学亲子活动总结
2014/07/01 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
欢迎新生标语
2014/10/06 职场文书
公司财务管理制度
2015/08/04 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python