<!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. display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

  2. JS实现表格列宽拖动

    在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...

  3. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  4. 动态改变EasyUI grid 列宽和隐藏列

    隐藏显示 $('#yourGrid').datagrid('hideColumn','yourColumn'); $('#yourGrid').datagrid('hideColumn','yourC ...

  5. jquery实现表格可变列宽插件开发

    工作中用到了表格的可变列宽,网上看了下,自己也实现了一个,整理贴记录. 测试环境chrome,ie8,firefox jquery版本1.8.2 原理:监听table第一行的mousemove事件,当 ...

  6. JQuery 表格拖动调整列宽效果

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...

  7. WPF学习笔记（3）：ListView根据内容自动调整列宽

    DataGrid中,只要不设置DataGrid的宽度和列宽度,或者将宽度设置为Auto,那么表格就会根据内容自动调整宽度,以显示所有内容.但如果是ListView,按以上方法设置,却达不到列宽自动调整 ...

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

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

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

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

随机推荐

  1. springmvc返回jsp源代码解决办法

    url-pattern问题 spring用到forward("/WEB-INF/jsp/*.jsp")而forward当然是又要经过web.xml的映射的,然后,在URL匹配时,  ...

  2. 【Permutations】cpp

    题目: Given a collection of numbers, return all possible permutations. For example,[1,2,3] have the fo ...

  3. socket 套接字

    网络:交换机,路由器,网线 交换机:分配.. 路由器:找寻网络线路 网络架构: 应用层 ---> 表示层 ---> 会话层 ---> 传输层 ---> 网络层 ---> ...

  4. HDU 5568 sequence2 区间dp+大数

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5568 题意: 求所有长度为k的严格升序子序列的个数. 题解: 令dp[i][k]表示以i结尾的长度为 ...

  5. 【转载】spring的普通类中如何取session和request对像

    原文地址:http://blog.csdn.net/yousite1/article/details/7108585 首先要在web.xml增加如下代码: <listener> <l ...

  6. 【DP】permu

    permu [Description] 给定两个1~N的全排列A,B.有两个指针q和p,一开始q.p都为0,可执行以下三种操作: 1.q+1:2.p+1:3.q+1且p+1(Aq+1≠Bp+1时才可以 ...

  7. NYOJ-289 苹果 TLE 分类： NYOJ 2013-12-29 17:52 282人阅读 评论(0) 收藏

    #include<stdio.h> struct apple{ int m; int v; }app[1010]; int money(int i,int v); int main(){ ...

  8. [百度空间] [转]程序员趣味读物：谈谈Unicode编码

    出处:CSDN [ 2005-05-13 10:05:53 ] 作者:fmddlmyy 这是一篇程序员写给程序员的趣味读物.所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG ...

  9. css hack一览

    浏览器对css hack的支持情况

  10. ASP.NET页面优化性能提升方法记录

    今天与大家分享:一种优化页面执行速度的方法.采用这个方法,可以使用页面的执行速度获得[8倍]的提升效果. 为了让您对优化的效果有个直观的了解,我准备了下面的测试结果截图: 测试环境:1. Window ...