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

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. scala 排序

    sortBy() 定义: def sortBy[B](fun: (A) =>B) 栗子1: val words = "the quick brown fox jumped over t ...

  2. Java Thread系列（二）线程状态

    Java Thread系列(二)线程状态 一.线程的五种状态 新建状态(New):新创建了一个线程对象,尚未启动. 就绪状态(Runnable):也叫可运行状态.线程对象创建后,其他线程调用了该对象的 ...

  3. 关于anroid设置webview背景方法探讨（转）

    最近的项目中一直关于webView设置背景色问题在研究,最终找到了解决的方法. 基于我项目的需求,从服务端传过来的是带有标签的文本,如果使用textView会让整个布局显得很乱,里面的<img ...

  4. 是什么优化让 .NET Core 性能飙升？（转）

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ .NET Core(开放源代码,跨平台,x-copy可部署等)有许多令人兴奋的方面,其中最值得称赞的就是其性能了. 感谢所有社区 ...

  5. 跟微软保持适当距离--Hessian + .net 实现RPC体系的企业应用

    同在一个产业链园区的XX厂因为5台Window2003服务器收到了律师函并且被迫下了12万$的采购单,虽然100万对XXX厂来数不是大数目,但是总有种被打劫的感觉. 在企业ERP应用中服务层一般都是做 ...

  6. 动态列 Excel 导出

    /// <summary> /// 导出数据通用属性 需在属性进行标记 /// </summary> [AttributeUsage(AttributeTargets.Clas ...

  7. CodeForces 687B Remainders Game(数学，最小公倍数)

    题意:给定 n 个数,一个数 k,然后你知道一个数 x 取模这个 n 个的是几,最后问你取模 k,是几. 析:首先题意就看了好久,其实并不难,我们只要能从 n 个数的最小公倍数是 k的倍数即可,想想为 ...

  8. HDU 2044 一只小蜜蜂...(递推，Fibonacci)

    题意:中文题. 析:首先要想到达第 n 个蜂房,那么必须经 第 n-1 或第 n-2 个蜂房,那么从第 n-1 或第 n-2 个蜂房到达第 n 个,都各自有一条路线, 所以答案就是第 n-1 + 第 ...

  9. WordPress 3.7.1-web截屏插件整合教程-Xproer.ScreenCapture

    插件下载(PHP):wordpress 3.7.1, 说明:由于许多插件可能使用相同钩子,导致冲突,所以提供手支方式整合. 1.上传插件目录. 说明:WordPress 3.7.1 使用的是TinyM ...

  10. SQL Server查询所有存储过程信息、触发器、索引

    1. [代码]查询所有存储过程      01 select Pr_Name as [存储过程], [参数]=stuff((select ','+[Parameter] 02 from ( 03 se ...