<!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. iphone及ipad屏幕尺寸参考

    初代iPhone 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone 3GS也保持不变.那时编写iOS的App(应 ...

  2. manifold 微分流形上可以定义可微函数、切向量、切向量场、各种张量场等对象并建立其上的分析学，并可以赋予更复杂的几何结构以研究它们的性质。

    小结: 1.流形(英语:Manifolds)一般可以通过把许多平直的片折弯并粘连而成,是局部具有欧几里得空间性质的空间,是欧几里得空间中的曲线.曲面等概念的推广 2.描述一个流形往往需要不止一个“地图 ...

  3. python 全排列combinations和permutations函数

    结果为: 显然,combinations方法重点在组合,permutations方法重在排列. 还有就是,combinations和permutations返回的是对象地址,原因是在python3里面 ...

  4. 转：JAVA中解决Filter过滤掉css,js,图片文件等问题

    原文链接:https://www.cnblogs.com/ermeng/p/6440966.html public void doFilter(ServletRequest request, Serv ...

  5. # 20165225 《Java程序设计》第一周学习总结

    20165225 <Java程序设计>第一周学习总结 1.视频与课本中的学习: 首先是为了运行和开发Java分别安装了JRE和JDK,具体做法在老师给的<Java2 实用教程(第五版 ...

  6. pandas之DataFrame

    DataFrame 类型类似于数据库表结构的数据结构,其含有行索引和列索引,可以将DataFrame 想成是由相同索引的Series组成的Dict类型.在其底层是通过二维以及一维的数据块实现. 1,D ...

  7. 洛谷P4064 加法 [JXOI2017] 贪心

    正解:贪心 解题报告: 传送门! 首先最小值最大显然考虑二分?然后就二分一个值mid,从左往右考虑,对于小于等于mid的点显然可以求出这个点至少要加几次,然后找到覆盖这个点的右端点max的区间区间加上 ...

  8. OC屏幕手势解锁

    感觉屏幕解锁好像很牛的样子,所以试着写了一个,代码很简单,手势用到的也是原生的,如果该代码帮助了你,记得点赞,如果该代码有任何问题,也可以随时和我联系.改代码用到的两张图片,是我随便找的两张,可以自行 ...

  9. what's the python之基本运算符及字符串、列表、元祖、集合、字典的内置方法

    计算机可以进行的运算有很多种,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.字符串和列表的算数运算只能用+和*,字典没有顺序,所以不能进行算数运算和比较运算.比较运算中= ...

  10. [Shapefile C Library]读写shp图形（C++&.net Wapper）

    ShapeLib的.net Wapper版可以在官网下载到,在WorldWind中也有使用.ORG据说也是使用的ShapeLib实现的shp文件的读写. 官网:http://shapelib.mapt ...