<!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服务器下用root登录ftp

    因为安全方面的原因,root用户是默认不能登录ftp服务的. 如果一定要用root登录,则: 1.删除或注释/etc/vsftpd.ftpusers中的root 2.删除或注释/etc/vsftpd. ...

  2. hexo博客简易搭建教程

    什么是Hexo Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页.官网 Hexo安装 安装 在安装Hex ...

  3. VMware Workstation All Key

    官方下载:https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html 懒人打包:链接:https:/ ...

  4. angular4升级angular5问题记录之this.location.back()

    在之前的项目中,导航回上一个路由采用注入的Location服务,利用浏览器的历史堆栈,导航到上一步. 官方文档也就是这么写的 而然在升级到5.2的版本的时候,在浏览器运行的时候并没有什么问题,在项目打 ...

  5. 机器学习之支持向量机（三）：核函数和KKT条件的理解

    注:关于支持向量机系列文章是借鉴大神的神作,加以自己的理解写成的:若对原作者有损请告知,我会及时处理.转载请标明来源. 序: 我在支持向量机系列中主要讲支持向量机的公式推导,第一部分讲到推出拉格朗日对 ...

  6. mysql3 - 常规数据检索、常见操作与函数

    一.常规数据检索 二.常见操作与函数

  7. iOS程序闪退的原因以及处理办法

    iOS程序闪退是一种比较常见的现象.闪退的情况很多,造成程序闪退的原因也很多. ================================启动时闪退======================= ...

  8. 第十八章 DjangoWeb开发框架

    第十八章 DjangoWeb开发框架 第一课 内容概要: 1.JS正则 -登录注册验证 2.组件 1.BootStrap -css -js 学习BootStrap规则 2.jQueryUI -css ...

  9. Python实现二分查找

    老生常谈的算法了. #!/usr/bin/python # -*- coding:utf-8 -*- # Filename: demo.py # 用python实现二分查找 def binarySea ...

  10. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...