<!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>

[转] js 实现table每列可左右拖动改变列宽度的更多相关文章

  1. js 实现table每列可左右拖动改变列宽度 【转载】

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  2. js实现table内 某列的内容进行即时筛选

    往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选. 而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器 ...

  3. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  4. [Js/Jquery]table行转列

    摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适, ...

  5. JS可改变列宽table

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  6. js合并table指定列

    function MergeTableCell(tableId, startRow, endRow, col) { var tb = document.getElementById(tableId); ...

  7. 原生js实现table表格列宽自由缩放

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

  8. 原生js实现 table表格列宽拖拽

    查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

  9. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

随机推荐

  1. git仓库迁移的解决方案

    一.问题 在github中遇到感兴趣的项目,直接克隆下来,随着兴趣越来越浓,在本地做了些修改,后来干脆想fork到自己的github仓库,又要把本地的修改提交到fork后的自己的github仓库中.这 ...

  2. [译]Javascript 参数(arguments)对象

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  3. 【C#】如何打开Model Browser(实体数据模型浏览器)

    Visual Studio 2017 如何打开Model Browser(实体数据模型浏览器) 2017-10-11 十有三 2 浏览:4956 开发工具 Visual Studio 做个笔记,记录下 ...

  4. ubuntu - 14.04，安装、配置GO语言开发工具Eclipse！！

    在配置Eclipse之前,我们必须保证下面这些都已经安装,并且正常工作了: 一,Go语言:参考文章 http://blog.csdn.net/sunylat/article/details/49859 ...

  5. MySQL 5.0的my.cnf配置选项(另外一种方式分类整理)

    一.   mysqld程序--目录和文件 basedir = path 使用给定目录作为根目录(安装目录). Show variables like “basedir”   //数据库中查看目录 da ...

  6. 转载 NoSQL | Redis、Memcache、MongoDB特点、区别以及应用场景

    NoSQL | Redis.Memcache.MongoDB特点.区别以及应用场景 2017-12-12 康哥 码神联盟 本篇文章主要介绍Nosql的一些东西,以及Nosql中比较火的三个数据库Red ...

  7. FullCalendar插件的基本使用

    我的另一博客地址:https://segmentfault.com/u/lyrfighting/articles 前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Ful ...

  8. Python——用socket和线程实现全双工收发数据

    用socket和线程实现全双工收发数据 1.基础知识 Socket(套接字) 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.由此知道套接字是全双工的. 线程 ...

  9. 使用between and 作为查询条件

  10. vscode 配置 java utf-8 编码

    utf-8 编码 和 lombok 的 配置 "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseS ...