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. ubuntu中mysql版本升级到5.7

    0 前言 前几天图书馆说服务器(Ubuntu14.04)有安全漏洞,不按时修复会关停. 看了一下漏洞清单,主要是ssh和mysql的版本问题. 把mysql升级了一下,升到了5.7,升级之前还备份了数 ...

  2. 使用Node.js快速搭建简单的静态文件服务器

    做前端有时会采用一些复杂框架,在文件系统中直接打开页面(用file:///方式打开),往往会报跨域的错,类似于“XMLHttpRequest cannot load ...(文件名). Cross o ...

  3. netty6---序列化与反序列化

    package com.cn; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import ja ...

  4. windows使用IPC和文件共享

    远程访问windows资源有很多方式,如果给自己用可以使用ipc或开启共享设置只共享给特定用户.如果给所有人用,可以开启everyone共享和guest账户 { "远程获取Windows资源 ...

  5. Python3.x：访问带参数链接并且获取返回json串

    Python3.x:访问带参数链接并且获取返回json串 示例一: import json import xml.dom.minidom from urllib import request, par ...

  6. vsftpd搭建ftp服务，并实现虚拟用户访问

    安装vsftpd服务: yum install vsftpd -y [root@wadeson ~]# rpm -ql vsftpd /etc/logrotate.d/vsftpd /etc/pam. ...

  7. 20145310 《Java程序设计》第5周学习总结

    20145310 <Java程序设计>第5周学习总结 教材学习内容总结 本周主要进行第八章和第九章的学习. java中所有的错误都会打包为对象,可以try catch代表错误的对象后做一些 ...

  8. KALI视频学习11-15

    KALI视频学习11-15 第十一集 看到openvas的主界面(web界面) ping靶机,看是否能正常连通 创建一个扫描目标Configuration-Targets,默认扫描目标为本机 添加一个 ...

  9. Hive相关随笔

    1).Hive中Select Top N的实现 Hive中使用 Order by + Limit 可以很容易地实现Select Top N. 但是在Hive中Order by只能使用1个Reduce, ...

  10. 深度学习：Keras入门(一)之基础篇【转】

    本文转载自:http://www.cnblogs.com/lc1217/p/7132364.html 1.关于Keras 1)简介 Keras是由纯python编写的基于theano/tensorfl ...