table

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>table</title>

</head>

<body>

    <table id="tb_3" 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>200004</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_3");

        console.log(table.rows[0].cells)

        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>

　　

用户编号 试用时间 转正时间 性别 姓名拼音 生日时间 民族 身高
2000001 1997-3-13 1997-3-13 1 WZJ 1965-3-13 汉 171
2000045 2001-2-15 2001-3-15 0 WY 1978-8-5 汉 162
200004 2001-2-23 2001-3-23 0 LQ 2001-2-23 汉 171

js 可拉伸表格的更多相关文章

  1. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  2. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  3. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  4. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  5. js导出Excel表格

    js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...

  6. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  7. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  8. [转]JS组件系列——表格组件神器：bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  9. JS组件系列——表格组件神器：bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

随机推荐

  1. googleBigTable

    Bigtable是一个分布式的结构化数据存储系统,它被设计用来处理海量数据:通常是分布在数千台普通服务器上的PB级的数据.Google的很多项目使用Bigtable存储数据,包括Web索引.Googl ...

  2. Ubuntu16.04系统中Nmon的安装

    Nmon的安装,亲民的安装方法: apt install nmon 不再需要源码编译安装和下载文件到指定目录,解压再运行了.

  3. sqoop命令，mysql导入到hdfs、hbase、hive

    1.测试MySQL连接 bin/sqoop list-databases --connect jdbc:mysql://192.168.1.187:3306/trade_dev --username ...

  4. iis原理介绍

    它是一个程序,负责对网站的内容进行管理,以及对客户的请求(就是Http请求)做出反应.当用户对一个页面提出请求时,IIS做如下反应(忽略权限):1.把对方请求的虚拟路径转换成物理路径2.根据物理路径搜 ...

  5. OpenStack之基础知识

    一.云计算 云计算(cloud computing)是基于互联网的相关服务的增加.使用和交付模式,通常涉及通过互联网来提供动态易扩展且经常是虚拟化的资源.云是网络.互联网的一种比喻说法.过去在图中往往 ...

  6. 解决"此请求已被阻止，因为当用在 GET 请求中时，会将敏感信息透漏给第三方网站"的问题

    在ASP.NET MVC项目中,使用AJAX向控制器发送GET请求获取JSON数据时,出现这个错误:"此请求已被阻止,因为当用在 GET 请求中时,会将敏感信息透漏给第三方网站.若要允许 G ...

  7. LIS严格递增和非递减模板

    2017-09-10 16:51:03 writer:pprp 严格递增的LIS模板 #include<stdio.h> #include<string.h> #include ...

  8. jvm垃圾回收策略

    一.jvm堆内存的分代划分 在基于分代的内存回收策略中,堆空间通常都被划分为3个代,年轻代,年老代(或者tenured代),永久代.在年轻代中又被划分了三个小的区域,分别为:Eden(伊甸)区,S0区 ...

  9. 配置spring boot 内置tomcat的accessLog日志

    #配置内置tomcat的访问日志server.tomcat.accesslog.buffered=trueserver.tomcat.accesslog.directory=/home/hygw/lo ...

  10. python中的参数传递和返回值

    python中的参数传递类似java,有着自己的内存回收机制,这和C++有着很大的差别. 1.函数的参数传递: >>> a = [, , ] >>> def fun ...