在数据表格中，有时候需要拖动表格宽度，查看完整的数据，是很常用的功能。

1 效果

可以用纯JS就可以实现，如下，是正常情况下的表格：

拖动表格标题中间线，拖动后效果如下：

查看DEMO

2 代码

HTML代码：

 <!DOCTYPE html>

 <html>

 <head>

     <title>演示</title>

     <script type="text/javascript" src="tabSize.js"></script>

     <script type="text/javascript">

         window.onload = function() {

             tabSize.init('resizeTable');

         };

     </script>

     <style>

         .resizeBox{overflow-x: auto; width: 500px;}

         table{width: 100%;border: 1px solid #000;border-collapse:collapse;}

         th{background: #ccc;}

         th, td{border: 1px solid #000;}

     </style>

 </head>

 <body>

 <div class="resizeBox">

     <table id="resizeTable">

         <thead>

         <tr><th>标题1</th><th>标题2</th><th>标题3</th></tr>

         </thead>

         <tbody>

         <tr><td>第1行</td><td>第1行</td><td>第1行</td></tr>

         <tr><td>第2行</td><td>第2行</td><td>第1行</td></tr>

         <tr><td>第3行</td><td>第3行</td><td>第1行</td></tr>

         </tbody>

     </table>

 </div>

 </body>

 </html>

JS代码：

 /**

  * Created by ywj on 2017/10/24.

  */

 "use strict";

 var tabSize = tabSize || {};

 tabSize.init = function (id) {

     var i,

         self,

         table = document.getElementById(id),

         header = table.rows[0],

         tableX = header.clientWidth,

         length = header.cells.length;

     for (i = 0; i < length; i++) {

         header.cells[i].onmousedown = function () {

             self = this;

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

                 self.mouseDown = true;

                 self.oldX = event.x;

                 self.oldWidth = self.offsetWidth;

             }

         };

         header.cells[i].onmousemove = function () {

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

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

             } else {

                 this.style.cursor = 'default';

             }

             if (self == undefined) {

                 self = this;

             }

             if (self.mouseDown != null && self.mouseDown == true) {

                 self.style.cursor = 'default';

                 if (self.oldWidth + (event.x - self.oldX) > 0) {

                     self.width = self.oldWidth + (event.x - self.oldX);

                 }

                 self.style.width = self.width;

                 table.style.width = tableX + (event.x - self.oldX) + 'px';

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

             }

         };

         table.onmouseup = function () {

             if (self == undefined) {

                 self = this;

             }

             self.mouseDown = false;

             self.style.cursor = 'default';

             tableX = header.clientWidth;

         };

     }

 };

JS实现表格列宽拖动的更多相关文章

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

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

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

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

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

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

  4. 原生js实现 table表格列宽拖拽

    查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

  5. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  6. 转！！Java JTable 根据表格内容 自动调整表格列宽

    //根据表格内容 自动调整列宽http://blog.sina.com.cn/s/blog_5e54d6140100s1d3.html

  7. eas之添加表格列宽自动调整设置

    设置表格整体宽度自动调整为所在panel的宽度 KDTable table=new KDTable(); table. setAutoResize (boolean); 注意:该功能在冻结功能启用后, ...

  8. java表格操作之设置表格列宽

    设置所有列的宽度 /** * 设置所有列的列宽 * @param table * @param width */ public void setAllColumnWidth(JTable table, ...

  9. JS可改变列宽table

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

随机推荐

  1. SetupDiEnumDeviceInfo

    BOOLEANSetupDiEnumDeviceInfo(IN HDEVINFO DeviceInfoSet,IN DWORD MemberIndex,OUT PSP_DEVINFO_DATA Dev ...

  2. msys2 + clion安装所需的mingw64编译环境

    pacman -S mingw-w64-x86_64-toolchain 输出结果为: $ pacman -S mingw-w64-x86_64-toolchain:: 在组 mingw-w64-x8 ...

  3. 搭建jfinal框架时报 Could not load driverClass com.mysql.jdbc.Driver

    搭建jfinal框架时报 Could not load driverClass com.mysql.jdbc.Driver 没有加载MySQL的驱动,你有没有把mysql的驱动包放到你项目的WEB-I ...

  4. tab切换代码优化

    上次的tab切换的代码里面有很多重复的代码,需要做做优化,把重复的代码用函数封装起来调用. 优化前: <script> //获取id封装成一个函数$()方便调用 function $(id ...

  5. VueX-状态管理器

    一.VueX功能与解决的问题 1.中央状态管理器的功能: 1.1.可以管理共享状态1.2.提供一 个可修改状态的方法1.3.提供状态获取的方法1.4.状态更改后,有通知机制 2.中央状态管理器解决的问 ...

  6. 如何用word文档在博客里发表文章

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  7. linux每天一小步---cp命令详解

    1 命令功能      cp命令用于复制文件或者目录,cp是copy的缩写. 2 命令语法 cp  [参数] 源文件或者目录  目的文件或者目录 3 命令参数 -a  等同于-dRp,保存所有 -d ...

  8. 课堂限时训练-简易计算器·mini dc

    课堂限时训练-简易计算器·mini dc 实验题目 采用后缀表达式法,设计一个建议计算器,实现+.-.*./四种运算. 代码实现 码云链接 关键代码部分及结果如下: 实验分析 首先,分析一下后缀表达式 ...

  9. spring mvc 数据回显

    1.spring mvc自动将传入的pojo数据存入request域 request中的key是该pojo类名,首字母小写. JSP controller 第一次访问user.jsp 填写表单 点击提 ...

  10. 对ConditionQueue和锁的理解

    1. 什么时候使用conditionQueue 使用conditionQueue的一个最基本的条件是,操作和状态相关,而且是多线程同时访问的状态. 也就是说在使用conditionQueue的时候, ...