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表格列宽相关推荐

  1. html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案

    Js拖拽实现改变Table的列宽 如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...

  2. html5 原生拖拽,原生JS实现拖拽效果

    这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...

  3. 原生js实现拖拽上传文件

    原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...

  4. 原生JS实现拖拽进度条、滚动鼠标显示相应的内容

    今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...

  5. 原生JS实现拖拽垂直进度条

    先看效果图 代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...

  6. 原生JS实现拖拽翻书特效

    给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...

  7. iden中html中表格自动生成,JS实现动态生成html table表格的方法分析

    本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有 ...

  8. 在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效

    来自文章  http://www.jb51.net/css/153601.html 在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对 ...

  9. 拖动改变Table的列宽度

    收藏自:http://www.cnblogs.com/xieex/archive/2007/12/15/996025.html <html> <head> <meta h ...

最新文章

  1. 英文句子改写在线软件_试完这些英文论文写作辅助神器,你会发现新大陆der~...
  2. mysql5.7 首次登陆_mysql5.7.20第一次登录失败的快速解决方法
  3. what you CAN LEARN FROM AUTOMATOR AND APPLE STEVE JOBS
  4. 操作系统 --- 进程和管程的不同
  5. Web API 速率限制(一)
  6. Jquery mobile 新手问题总汇
  7. android程序怎么导出数据库,将android程序中的数据库导出到SD卡
  8. 内存工作原理及发展历程
  9. 韩国央行行长李柱烈:加密货币的波动给金融稳定带来风险
  10. Python零基础入门(五)——文本文件读写和操作[学习笔记]
  11. Highlighter与BooleanQuery查询
  12. 计算机二级不看教材只刷题可以吗,中级会计可以只看轻松过关不看教材吗
  13. C语言新手记:相反数
  14. Bluetooth Battery Monitor(蓝牙电量监控软件)
  15. 2021年春秋杯网络安全联赛秋季赛勇者山峰 pwn The SIMS - Programming Girl
  16. get请求报404 NOT FOUND问题的原因及解决。
  17. Android Manifest功能与权限描述大全,flutter安装androidsdk
  18. Matlab人工智能算法
  19. 一维DOA估计之Capon算法(含程序)
  20. Premiere导出视频音画不同步的解决方案

热门文章

  1. 正则 文字输入不超过5个汉字或者10个字符
  2. mysql sql使用_MySql简单sql使用
  3. RTMPDump源代码分析 0: 主要函数调用分析
  4. matlab 释放变量,怎么能释放已经使用的内存
  5. git版本回退(回退提交到本地仓库代码)
  6. Tomcat无响应问题
  7. springboot引入本地jar包,并且打jar包时包含本地jar
  8. Eclipse启动tomcat项目乱码而终端启动tomcat正常的解决办法
  9. Tomcat报错 严重: A child container failed during start
  10. 关掉云存储后噪声 海康摄像头_万物互联 海量数据如何实现更好的存储和应用...