<!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. centos7时间同步

    用ntpdate从时间服务器更新时间 1.如果你的linux系统根本没有ntpdate这个命令 yum install -y ntp 2.安装完了之后,你不要做什么配置,也不需要,直接测试一下 [ro ...

  2. dcoker实战,使用docker部署NodeJs应用

    docker简介   docker是一个开源的应用容器引擎,可以为我们提供安全.可移植.可重复的自动化部署的方式.docker采用虚拟化的技术来虚拟化出应用程序的运行环境.如上图一样.docker就像 ...

  3. Java 面向对象三大特征之一： 多态

    多态与类型转换 子类重写父类方法 1)位置:子类和父类中有同名的方法 2)方法名相同,返回类型和修饰符相同,参数列表相同       方法体不同 多态的优势和应用场合 多态:同一个引用类型,使用不同的 ...

  4. python并发编程之多进程(一)：进程开启方式&多进程

    一,进程的开启方式 利用模块开启进程 from multiprocessing import Process import time,random import os def piao(name): ...

  5. Hibernate学习（五）lazy属性学习（true和extra区别）

    Lazy(懒加载)在hibernate何处使用:1.<class>标签上,可以取值:true/false,(默认值是:true)2.<property>标签上,可以取值:tru ...

  6. HDU - 2112 HDU Today Dijkstra

    注意: 1.去重边 2.终点和起点一样,应当输出0 3.是无向图 AC代码 #include <cstdio> #include <cmath> #include <al ...

  7. HDU - 1907 John 反Nimm博弈

    思路: 注意与Nimm博弈的区别,谁拿完谁输! 先手必胜的条件: 1.  每一个小游戏都只剩一个石子了,且SG = 0. 2. 至少有一堆石子数大于1,且SG不等于0 证明:1. 你和对手都只有一种选 ...

  8. python-scrapy的编码问题

    在学习scrapy中,遇到编码问题还是很头痛的问题的.由于对于语言的对不熟悉,加上不会思考的去解决问题.这样盲目的实践似乎就是在浪费时间. 用心思考一下是非常重要的一个过程,在没有办法前进的时候,先学 ...

  9. python小练习之读取文件写入excel

    文件是个json文件 内容为: 导入excel后的格式为 屡一下思路 一步步怎么实现: 1 首先需要读取json文件 然后将读取的内容转为字典 2 将excel的列名写入一个list中 然后遍历执行写 ...

  10. mysql导入导出数据

    mysqldump是MySQL自带的导出数据工具,通常我们用它来导出MySQL中,但是有时候我们需要导出MySQL数据库中某个表的部分数据作为测试. mysqldump命令中带有一个 --where/ ...