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

转载自：http://blog.csdn.net/zanychou/article/details/46988529

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

  1. [转] js 实现table每列可左右拖动改变列宽度

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

  2. vuejs中拖动改变元素宽度实现宽度自适应大小

    需求效果: 原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算:当拖动分隔线1时,计算元素框left和mid:当拖 ...

  3. 任意表格(table)实现拖动列(column)改变列大小

    直接上代码吧,原理可以看我上一篇博文.本实现基于jquery,完美实现拖动改变表格的列大小功能,只需将代码放置在你页面的底部即可(jquery必须先引入). $(function () { var i ...

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

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

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

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

  6. [Js/Jquery]table行转列

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

  7. JS可改变列宽table

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

  8. js合并table指定列

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

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

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

随机推荐

  1. linux下双网卡的绑定

    如果服务器上有两快网卡就可以把它绑定为一块虚拟的网卡,如果一块网卡坏了另一块还可以继续工作,增加了冗余度和负载,具体做法如下: 新建一个虚拟的网卡,命令如下: iv /etc/sysconfig/ne ...

  2. configure: error: Bundled APR requested but not found at ./srclib/. Download and unpack the corresponding apr and apr-util packages to ./srclib/.

    Apache在2.4版本以后,编译时: # ./configure \ --prefix=/usr/local/apache2 \ --with-included-apr \ --enable-so ...

  3. 洛谷 P4016负载平衡问题【费用流】题解+AC代码

    洛谷 P4016负载平衡问题 P4014 分配问题[费用流]题解+AC代码 负载平衡问题 题目描述 GG 公司有n个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 n ...

  4. Kubernetes 概念整理

    注:以下大部分内容来自网上摘录,以便后期查阅. Kubernetes (通常称为 K8s) 是用于自动部署.扩展和管理容器化(containerized)应用程序的开源系统,是 Google 内部工具 ...

  5. 多线程中join()的用法

    Thread中,join()方法的作用是调用线程等待该线程完成后,才能继续用下运行. public class TestThread5 { public static void main(String ...

  6. python进阶学习笔记（二）

    1.模块和包的概念 python的解决方案是把同名的模块放到不同的包中 1.1,导入模块 要使用一个模块,我们必须首先导入该模块.Python使用import语句导入一个模块.例如,导入系统自带的模块 ...

  7. hdu3480 Division（dp平行四边形优化）

    题意:将n个数分成m段,每段的代价为最大值减最小值的平方,为代价最小是多少n<=10000 ,m<=5000 题解:先拍好序,从小到大,这样绝对是花费最小的,不过怎么样来做呢?一定很容易想 ...

  8. MySql全国省市区SQL语句

    CREATE TABLE IF NOT EXISTS `province` (   `id` int(11) NOT NULL auto_increment,   `provinceID` int(1 ...

  9. C编程之 一个容易忽视但是十分严重的小错误

    while(...) { ...if(a=b) continue; } 调试时就一直执行continue.一直找不到原因,后面才发现是少一个"=": 还有一次就是也是在if中,if ...

  10. hihoCoder 1493 : 歌德巴赫猜想 素数筛法

    题意:哥德巴赫猜想认为"每一个大于2的偶数,都能表示成两个质数之和".给定一个大于2的偶数N,你能找到两个质数P和Q满足P<=Q并且P+Q=N吗?如果有多组解,输出P最小的一 ...