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

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. iOS7中的多任务I

    [改变了后台任务的运行方式] 在iOS6和之前的系统中,系统在用户退出应用后,如果应用正在执行后台任务的话,系统会保持活跃状态直到后台任务完成或者是超时以后,才会进入真正的低功耗休眠状态. 而在iOS ...

  2. Imageloader、Glide、Fresco的性能及加载速度比较

    一.使用方式:    // 下面两个依赖包可选,根据需求二选一即可,    compile 'com.ladingwu.library:fresco:0.0.9'    compile 'com.la ...

  3. zTree的简单使用

    理论可以看:http://www.cnblogs.com/shinhwazt/p/5828031.html zTree包:链接:http://pan.baidu.com/s/1eR4xP6M 密码:w ...

  4. CentOS 7下面配置静态IP

    CentOS 7.0系统是一个很新的版本哦,很多朋友都不知道CentOS 7.0系统是怎么去安装配置的哦,因为centos7.0与以前版本是有很大的改进哦. 说明:截止目前CentOS 7.x最新版本 ...

  5. 二）quartz.properties

    The Properties File Quartz uses a properties file called (kudos on the originality) quartz.propertie ...

  6. .NET基础 （14）管理文件和文件夹的类型

    管理文件和文件夹的类型1 如何操作文件和文件夹2 如何实现文件和文件夹的监控功能 管理文件和文件夹的类型1 如何操作文件和文件夹 .NET内建类中提供了FileInfo和DictionaryInfo两 ...

  7. spark配置文件和执行部分代码

    export SPARK_DAEMON_JAVA_OPTS="-Dspark.deploy.recoveryMode=ZOOKEEPER-Dspark.deploy.zookeeper.ur ...

  8. IntentService介绍

    1.IntentService 是什么 一个封装了HandlerThread和Handler的异步框架. 是一种特殊Service,继承自Service,是抽象类,必须创建子类才可以使用. 可用于执行 ...

  9. 对象初始化的完整过程(C#)

    1.静态构造函数 在引入本文的主题之前,我们先来铺垫一下吧,看看静态构造函数的概念及用途. C#中允许创建无参数构造函数,该函数仅执行一次.它一般被用来初始化静态字段.CLR不能保证在某个特定时刻执行 ...

  10. .NET中的异常处理机制（一）

    1.异常处理的总体指导思想 学习C#中的异常处理机制,大概要了解以下几点: 首先,我们需要知道的事所有具体异常都是继承自System.Exception基类的. 其次,要熟悉FCL类库内置好的一些异常 ...