html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽
员工编号 | 试用时间 | 转正时间 | 性别 | 姓名拼音 | 生日时间 | 民族 | 身高 |
vh20180421 | 2018-3-13 | 2018-6-13 | 1 | LDH | 1988-3-13 | 汉族 | 178 |
vh20180511 | 2018-5-15 | 2018-8-15 | 0 | WSW | 1990-8-5 | 蒙古族 | 162 |
vh20180618 | 2018-6-23 | 2018-9-23 | 0 | LQ | 1995-2-23 | 满族 | 171 |
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;
}
};
}
html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽相关推荐
- html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽 如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
- html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
- 原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
- 原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
- 原生JS实现拖拽垂直进度条
先看效果图 代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
- 原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
- iden中html中表格自动生成,JS实现动态生成html table表格的方法分析
本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有 ...
- 在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效
来自文章 http://www.jb51.net/css/153601.html 在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对 ...
- 拖动改变Table的列宽度
收藏自:http://www.cnblogs.com/xieex/archive/2007/12/15/996025.html <html> <head> <meta h ...
最新文章
- 英文句子改写在线软件_试完这些英文论文写作辅助神器,你会发现新大陆der~...
- mysql5.7 首次登陆_mysql5.7.20第一次登录失败的快速解决方法
- what you CAN LEARN FROM AUTOMATOR AND APPLE STEVE JOBS
- 操作系统 --- 进程和管程的不同
- Web API 速率限制(一)
- Jquery mobile 新手问题总汇
- android程序怎么导出数据库,将android程序中的数据库导出到SD卡
- 内存工作原理及发展历程
- 韩国央行行长李柱烈:加密货币的波动给金融稳定带来风险
- Python零基础入门(五)——文本文件读写和操作[学习笔记]
- Highlighter与BooleanQuery查询
- 计算机二级不看教材只刷题可以吗,中级会计可以只看轻松过关不看教材吗
- C语言新手记:相反数
- Bluetooth Battery Monitor(蓝牙电量监控软件)
- 2021年春秋杯网络安全联赛秋季赛勇者山峰 pwn The SIMS - Programming Girl
- get请求报404 NOT FOUND问题的原因及解决。
- Android Manifest功能与权限描述大全,flutter安装androidsdk
- Matlab人工智能算法
- 一维DOA估计之Capon算法(含程序)
- Premiere导出视频音画不同步的解决方案
热门文章
- 正则 文字输入不超过5个汉字或者10个字符
- mysql sql使用_MySql简单sql使用
- RTMPDump源代码分析 0: 主要函数调用分析
- matlab 释放变量,怎么能释放已经使用的内存
- git版本回退(回退提交到本地仓库代码)
- Tomcat无响应问题
- springboot引入本地jar包,并且打jar包时包含本地jar
- Eclipse启动tomcat项目乱码而终端启动tomcat正常的解决办法
- Tomcat报错 严重: A child container failed during start
- 关掉云存储后噪声 海康摄像头_万物互联 海量数据如何实现更好的存储和应用...