<!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. Django：模型model和数据库mysql（二）

    上一篇把简单的模型与数据库的搭建写了一遍,但模型中有很多深入好用的写法补充一下. 同样的栗子,建立新的模型与数据库来写一写 1.依然是搭建环境 >>>django-admin sta ...

  2. linux：基本指令ls、cd

    cd 指令  使用 cd 指令, 我们能在 Terminal 中轻松切换到不同的文件夹. 想从 Home 去 Documents 这个文件夹? 输入下面的命令就可以了. ~$ cd Documents ...

  3. Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr

    安装 cross-env yarn add -D cross-env 安装 html-webpack-plugin yarn add -D html-webpack-plugin 安装 webpack ...

  4. vue 静态资源 压缩提交自动化

    需要安装co和child_process模块,co可以执行多个promise,child_process可以执行命令行的库(cmd命令) 配置winrar(压缩包)坏境变量,参考资料https://j ...

  5. 确界原理 supremum and infimum principle 戴德金定理 Dedekind theorem

    确界原理  supremum and infimum principle  戴德金定理  Dedekind theorem http://www.math.ubc.ca/~cass/courses/m ...

  6. [Day2]变量、数据类型转换以及运算符

    1.变量 变量是内存中装载数据的小盒子,你只能用它来存取数据 2.计算机存储单元 (1)计算机存储设备的最小信息单元叫“位(bit)”,“比特位” (2)8个比特位表示一个数据,是计算机的最小存储单元 ...

  7. 抽屉之Tornado实战（6）--session工厂（工厂方法模式）

    我之前写的session一般保存在服务器的内存里,那可以保存在缓存,或是数据库,那问题来了,不同地方,保存方式是不同的,所以需要定义不同的类,cache/redis/memcached类 sessio ...

  8. NodeJS笔记（一）-免安装设置

    之前在官网下载的nodejs win64版本4.* 最近发现nodejs都已经更新到了7.X 稳定版都升级到了6.X ,nodejs升级的真是神速了,想要升级下, 使用官方给的方法更新失败(使用的是n ...

  9. Java之旅_高级教程_网络编程

    摘自:http://www.runoob.com/java/java-networking.html JAVA网络编程 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. j ...

  10. 新建虚拟机_WIN8 64位系统_启动报错Directory "EZBOOT" not found

    准备工作:下载win8 64 镜像文件 1.虚拟机安装win8 64位操作系统,新建虚拟机步骤同XP系统 2.BIOS设置CD/ROM启动,但启动报错,如下,由于镜像文件超过4G,无法从虚拟机安装,需 ...