<!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. 基于注解的DI（DI：Dependency Injection 依赖注入）

    注解方式xml里面就不需要注册bean了. 构建注解需要 1.导入spring-aop-4.2.1.RELEASE.jar 包  2.需要更换配置文件头,即添加相应的约束. 现在的Student类就要 ...

  2. c#设计模式-单例模式【转】

    单例模式三种写法: 第一种最简单,但没有考虑线程安全,在多线程时可能会出问题 public class Singleton { private static Singleton _instance = ...

  3. java实现生产者消费者模式

    生产者消费者问题是一个著名的线程同步问题,该问题描述如下:有一个生产者在生产产品,这些产品将提供给若干个消费者去消费,为了使生产者和消费者能并发执行,在两者之间设置一个具有多个缓冲区的缓冲池,生产者将 ...

  4. linux虚拟机与windows主机传输文件方法

    通过ssh    这种方法需要虚拟机内的linux安装ssh服务,默认是安装的。 首先检查ssh服务是开启的，通过shell下执行命令:service ssh status, 查看ssh服务是否已开启 ...

  5. SnackBar使用

    注意:build(BuildContext context)在 Scaffold.of(context)之前时,会报错,解决办法:通过build widget来解决,如下代码. import 'pac ...

  6. 解决VMware Workstation 不可恢复错误: (vcpu-0)

    转载:http://tieba.baidu.com/p/3487673152 如图的错误 如果你按照破解了mac支持的VMware Workstation 11的新建虚拟机向导一步一步创建了一个mac ...

  7. oracle数据结构

    数据类型: 1 字符数据:CHAR VARCHAR NCHAR NVARCHAR2 LONG CLOB NCLOB  2 数字数据类型:NUMBER 唯一用来存储数字型的类型 3 日期数据类型: 4 ...

  8. Linux更改文件或目录的所有者和所有组

    上节我们说了所有者和所有组的概念, 一个文件它的所有者是谁,属于哪个组的,不同的角色对其的操作权限是不一样的,详细信息请看上节Linux权限管理 这里我们主要说的是怎么去改变这个文件或目录的所有者和所 ...

  9. luogu2155 [SDOI2008]沙拉公主的困惑

    link 求出1到N的阶乘中与M的阶乘互质的数的个数,对R取模,多组询问,R<=10^9+10,T<=10000,1 < = N , M < = 10000000 1到\(M! ...

  10. [转载]什么情况下应该设置 cudnn.benchmark = True？

    总的来说,大部分情况下,设置这个 flag 可以让内置的 cuDNN 的 auto-tuner 自动寻找最适合当前配置的高效算法,来达到优化运行效率的问题. 一般来讲,应该遵循以下准则: 如果网络的输 ...