<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>火星黑洞</title>

</head>

<body>

    <table id="table" cellspacing="0" cellpadding="1" width="100%" border="1">

        <tbody>

            <tr align="center" bgcolor="#1890ff">

                <td style="width:100px;">id</td>

                <td>公司名称</td>

                <td>姓名</td>

                <td>岗位</td>

                <td>技术等级</td>

                <td>年龄</td>

                <td>民族</td>

                <td>籍贯</td>

            </tr>

            <tr>

                <td>20</td>

                <td>科技有限公司</td>

                <td>火星黑洞</td>

                <td>web开发</td>

                <td>吼吼吼</td>

                <td>22</td>

                <td>汉</td>

                <td>湖北</td>

            </tr>

        </tbody>

    </table>

    <script type="text/javascript">

        var tTD;

        var table = document.getElementById("table");

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

        for (i = 0; i < table.rows[0].cells.length; i++) {

            table.rows[0].cells[i].onmousedown = function() {

                tTD = this;

                if (event.offsetX > tTD.offsetWidth - 10) {

                    tTD.mouseDown = true;

                    tTD.oldX = event.x;

                    tTD.oldWidth = tTD.offsetWidth;

                }

            };

            table.rows[0].cells[i].onmouseup = function() {

                if (tTD == undefined) tTD = this;

                tTD.mouseDown = false;

                tTD.style.cursor = 'default';

            };

            table.rows[0].cells[i].onmousemove = function() {

                if (event.offsetX > this.offsetWidth - 10)

                    this.style.cursor = 'col-resize';

                else

                    this.style.cursor = 'default';

                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';

                    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;

                    }

                }

            };

        }

    </script>

</body>

</html>

table可拖拽改变宽度的更多相关文章

  1. jQuery实现类似Chrome控制台可拖拽改变宽度的样式

    最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...

  2. extjs grid禁止表格头部使用鼠标拖拽改变宽度

    extjs6 经典版 表格头部使用鼠标拖动 禁止改变列的宽度 只需要给grid 设置属性enableColumnResize:false就可以啦 xtype:'grid', enableColumnR ...

  3. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  4. Winform拖拽改变无边框窗体大小

    大家在进行Winform开发过程中,很容易就可以完成一个窗口的布局工作,但现在的软件界面美化效果一个比一个好,很多软件都是无边框的,于是乎,你是不是也感叹:winform的带边框的窗体如此丑陋,我一定 ...

  5. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  6. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  7. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  8. 拖拽改变div的大小

    拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  9. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

随机推荐

  1. Codeforces 1137D - Cooperative Game - [交互题+思维题]

    题目链接:https://codeforces.com/contest/1137/problem/D 题意: 交互题. 给定如下一个有向图: 现在十个人各有一枚棋子(编号 $0 \sim 9$),在不 ...

  2. [No000018C]Vim清除上次的搜索高亮结果-Vim使用技巧(1)

    在打开文件中使用Vim搜索功能并开启高亮显示后怎么取消当前高亮显示的目标词? 最简单的方法是再使用Vim搜索一串文档中不存在的目标词来覆盖当前高亮的搜索结果. 其实,可以在Vim尾行模式下使用 :no ...

  3. centos7.2 nfs安装配置

    nfs服务端 ip:192.168.1.16 1.yum -y install rpcbind nfs-utils 2.创建文件/etc/exports,内容如下 /mnt/ 192.168.1.0/ ...

  4. spark学习笔记3

    Spark 支持在集群范围内将数据集缓存至每一个节点的内存中,可避免数据传输,当数据需要重复访问时这个特征非常有用,例如查询体积小的“热”数据集,或是运行如 PageRank 的迭代算法.调用 cac ...

  5. 转：Web项目的WEB-INF目录使用说明以及重定向与转发

    原文地址:https://www.cnblogs.com/shenxiaoquan/p/5819359.html 原文内容: 总结一下这篇文章的内容: WEB-INF下面的内容都是只能由服务器级别才能 ...

  6. mysql分库 分表

    原文链接:http://www.jianshu.com/p/89311703b320 传统的分库分表传统的分库分表都是通过应用层逻辑实现的,对于数据库层面来说,都是普通的表和库.分库分库的原因 首先, ...

  7. 占满屏幕的宽高,当把textarea换成其他标签的时候，怎么才能编辑?

    $('.nav').width($(window).width()); $('.nav').height($(window).height());   当把textarea换成其他标签的时候,怎么才能 ...

  8. python摸爬滚打之day03----基本数据类型(int,str,bool)

    1.数据类型转换 字符串 ----> bool print( bool("hello") )  -----> True 数字----> bool print( b ...

  9. VSCode代码修改后跑起来没反应，打开本地文件，代码没变化

    两种解决办法: 首先:修改VSCode默认配置文件,点击左下角设置标志图 -> 设置,出来了设置相关的东西,搜索 files.autoSave 第一种:把"files.autoSave ...

  10. Hadoop 尝试

    一. 使用环境Ubuntu 安装Hadoop需要的软件 命令: $ sudo apt-get install ssh $ sudo apt-get install rsync 提示错误: 错误原因: ...