查看效果

<!DOCTYPE html>

<html>

<head>

    <meta charset="gbk">

    <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>2000046</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");

    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>

　　

原生js实现 table表格列宽拖拽的更多相关文章

  1. 原生js实现table表格列宽自由缩放

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

  2. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  3. 利用插件（jQuery-ui.js）实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  4. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

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

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

  6. jQuery表格列宽可变，兼容firfox

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").mo ...

  7. 使用jqueryUI实现自由调整表格列宽

    今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实 ...

  8. 第十三篇 JS 操作table表格

    JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...

  9. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

随机推荐

  1. 物体检测丨Faster R-CNN详解

    这篇文章把Faster R-CNN的原理和实现阐述得非常清楚,于是我在读的时候顺便把他翻译成了中文,如果有错误的地方请大家指出. 原文:http://www.telesens.co/2018/03/1 ...

  2. ubuntu下lnmp添加虚拟目录没有权限

    lnmp.org下载的lnmp集成环境,通过lnmp vhost tsp创建了虚拟主机目录,将此目录导入到phpstorm中时提示错误,应该时权限的问题,想通过chmod -R 777 tsp来改变t ...

  3. MyBatis框架的XML数据访问Dao层接口的组合使用

    MyBatis 的前生为Apache的开源项目iBatis.其优势在于灵活,几乎可以替代JDBC,同时提供了编程接口.目前MyBatis的数据访问Dao层不需要实现类,也不需要像JDBC那样拼接Hql ...

  4. 【转】onAttachedToWindow()在整个Activity生命周期的位置及使用

    上篇博客实现圆角对话框样式的Activity中提到,若需实现圆角对话框Activity,需要在Activity的onAttachedToWindow()函数中做文章,那么就想问: onAttached ...

  5. 五、UML类图和六大原则-----《大话设计模式》

    一.单一职责原则     就一个类而言,应该仅有一个引起它变化的原因.     如果一个类承担的职责过多,就等于把这些职责耦合在一起,一个职责的变化可能会削弱或者抑制这个类完成其他职责的能力.这种耦合 ...

  6. CentOS7下Oracle11gR2监听启动错误解决

    oracle监听程序启动失败,错误如下: [oracle@localhost ~]$ lsnrctl start LSNRCTL - Production on -APR- :: Copyright ...

  7. 在页面实现qq跳转链接

    http://shang.qq.com/v3/widget/consult.html

  8. Windows上SVN服务器搭建【转】

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说.本文介绍Windows上 VisualSVN server 服务端和 TortoiseSVN客户端搭配使用: 现在S ...

  9. siege4安装和使用介绍

    使用文档参考地址:https://www.joedog.org/siege-manual/ siege4地址:http://download.joedog.org/siege/ cd /usr/loc ...

  10. JS 字符串 时间 数字函数操作 事件

    字符串  操作 var s="abcdefg" s.tolowerCase()   转小写 s.toupperCase()   转大写 s.substring(2,5)   索引下 ...