<!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. Windows8下安装ubuntu

    这类文章堪称多如牛毛,也有很多种方法.此处记录的是我试验成功的一种,Windows 8 + ubuntu + easyBCD,简单粗暴,只记操作,不讲原理. 一.腾空间 在Windows下,首先要给u ...

  2. transformations 变换集合关系 仿射变换

    http://groups.csail.mit.edu/graphics/classes/6.837/F03/lectures/04_transformations.ppt https://group ...

  3. [knowledge][lisp] lisp与AI

    https://blog.youxu.info/2009/08/31/lisp-and-ai-1/ https://blog.youxu.info/2010/02/10/lisp-and-ai-2/

  4. [CentOS7][ssh][publickey][troubleshoot] 通过密钥登录ssh故障排查

    通常情况下,我会使用非对称加密的方式来进行ssh的登录. 做法: 将公钥添加到 $HOME/.ssh/authorized_keys 文件中. 但是通常,会遇见各种各样的问题,导致失败.汇总如下: 0 ...

  5. 转:Spring与Mybatis整合的MapperScannerConfigurer处理过程源码分析

    原文地址:Spring与Mybatis整合的MapperScannerConfigurer处理过程源码分析 前言 本文将分析mybatis与spring整合的MapperScannerConfigur ...

  6. 图->定义

     文字描述 顶点 指图中的数据元素 弧尾 若<v,w>属于两个顶点之间的关系的集合,表示从v到w的一条弧,则v为弧尾或初始点 弧头 若<v,w>属于两个顶点之间的关系的集合,表 ...

  7. 如何使用List<HashMap<String, String>>详细讲解

    场景:要循环界面Table数据源与导出Excel数据源作对比. 说明: List<HashMap<String,String>>  List中每一项都是一个HashMap Ha ...

  8. 【PyQt5-Qt Designer】QSlider滑块

    QSlider滑块 QSlider简介 QSlider小部件提供了一个垂直或水平滑块. 滑块是控制有界值的经典控件.它允许用户沿水平或垂直凹槽移动滑块手柄,并将手柄的位置转换为合法范围内的整数值. Q ...

  9. Asp.net Mvc action返回多个模型实体给view

    1.controller中action代码: public class HomeController : Controller { public ActionResult Detail(int id) ...

  10. 帝国cms面包屑导航的首页链接锚文本改成关键字

    帝国cms面包屑导航的首页链接关键字一般都是“首页”二字或home,如果你想从这里提高锚文字的相关性,可以改成相应的关键字,那么如何来修改呢? 我们知道帝国CMS面包屑导航的变量是[!--newsna ...