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 单选框,多选框美化代码
Aug 01 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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 和 MySQL 基础教程(二)
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
Python实现的栈(Stack)
2018/01/26 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python random模块的使用示例
2020/10/10 Python
护士自我介绍信
2014/01/13 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
目标责任书范文
2014/04/14 职场文书
大学生英语演讲稿
2014/04/24 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
机械专业技术员求职信
2014/06/14 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
详解Python requests模块
2021/06/21 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技