原生js实现 table表格列宽拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>table</title>
</head>
<body>
<table id="tb_3" 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_3");
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>
原生js实现 table表格列宽拖拽的更多相关文章
- 原生js实现table表格列宽自由缩放
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...
- 原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- 利用插件（jQuery-ui.js）实现表格行的拖拽排序
template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...
- 原生JS实现弹出窗口的拖拽
上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- jQuery表格列宽可变，兼容firfox
本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").mo ...
- 使用jqueryUI实现自由调整表格列宽
今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实 ...
- 第十三篇 JS 操作table表格
JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...
- js创建table表格
//js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...
随机推荐
- VMware下OSSIM 5.2.0的下载、安装和初步使用（图文详解）
不多说,直接上干货! 入门阶段不建议选用最新的版本. 采用OSSIM 4.11 到 OSSIM5.0.3 之间任何版本做实验,sensor的状态都会是“V”. 建议,入门,采用OSSIM5.0.0 ...
- 一图秒懂http与https的区别
HTTPS与HTTP的一些区别 HTTPS协议需要到CA申请证书,一般免费证书很少,需要交费. HTTP协议运行在TCP之上,所有传输的内容都是明文,HTTPS运行在SSL/TLS之上,SSL/TLS ...
- php出现Warning: file_put_contents，failed to open stream
Warning: file_put_contents(D:/wwwroot/jinxiongdi/web/temp/caches/f/index_40F756F0.php) [function.fil ...
- html 手机端click 事件延迟问题(fastclick.js使用方法)
下载地址: fastclick.js 为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击 ...
- ASP.NET AJAX入门系列（5）：使用UpdatePanel控件（二）
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
- Android项目中包名的修改
通常修改包名时会造成R文件错误,并且有时带有原因不明的Manifest文件中多处文本混乱. 所以,将目前认为最为简洁方便的修改包名流程记录如下: 假设我们目前的包名为com.pepper.util,我 ...
- 【MATLAB 从零到进阶】day2 矩阵 数组
访问矩阵元素 >> A=[1,2,3;4,5,6;7,8,9]; >> x=A(2,3)% 双下标访问 x = 6 >> x=A(2)% 单下标访问 x = 4 单 ...
- nl
-b -b -a 表示不论是否为空行,也同样列出行号 -b -t 如果用空行,空行不要列出行号 -n 列出行号表示方法,主要有3中 -n -n ln 行号显示在屏幕的最左方显示 -n rn 行号显示在 ...
- Lucene全文检索技术学习
---------------------------------------------------------------------------------------------------- ...
- iTOP-IMX6UL 实战项目：ssh 服务器移植到 arm 开发板
实验环境:迅为提供的Ubuntu12.04.2 以及虚拟机 编译器:arm-2009q3 编译器 开发板系统:QT系统 开发板使用手册中给Windows 系统安装了 ssh 客户端,给 Ubunt ...