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

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. 关于InvokeMethod Activity的异步调用

    讨论地址:http://www.cnblogs.com/foundation/archive/2009/12/17/1626617.html 结论是IsCompleted的设置被忽略,看代码里注释 u ...

  2. 年末福利,C/S应用升级更新完整解决方案放送

    程序员,工作累寿命短,大家应该学会分享,别浪费有限的生命与健康做重复的事情. C/S方式实现的应用有个升级更新功能是必需的,以前整过一个但是没考虑多套C/S应用的情况,那个时候公司只有一套系统,现在又 ...

  3. 《Python自动化测试修炼宝典》线上课程已经成功入驻网易云课堂......

    <Python自动化测试修炼宝典>线上课程已经成功入驻网易云课堂...... IT测试老兵利用工作之余,亲自录制的<Python自动化测试修炼宝典>线上课程已经成功入驻网易云课 ...

  4. 6 scrapy框架之分布式操作

    分布式爬虫 一.redis简单回顾 1.启动redis: mac/linux:   redis-server redis.conf windows: redis-server.exe redis-wi ...

  5. UVa 10570 Meeting with Aliens （暴力）

    题意:给定一个排列,每次可交换两个数,用最少的次数把它变成一个1~n的环状排列. 析:暴力题.很容易想到,把所有的情况都算一下,然后再选出次数最少的那一个,也就是说,我们把所有的可能的形成环状排列全算 ...

  6. 好用的下拉第三方——nicespinner

    1.简介 GitHub地址:https://github.com/arcadefire/nice-spinner Gradle中添加: allprojects { repositories { ... ...

  7. Android-自定义开关

    效果图: 需要两张图片,一张图片为背景,一张图片为滑动的点 布局去指定一个自定义View对象: view.custom.shangguigucustomview.MyCustomSwitch < ...

  8. struct timeval 计时问题

    linux编程中,如果用到计时,可以用struct timeval获取系统时间.struct timeval的函数原型如下: struct timeval { __kernel_time_t tv_s ...

  9. Linq使用中的ToList注意事项

    在使用Linq时,如果查询逻辑太复杂,可以拆分为多个Linq查询,下一个Linq在上一个Linq查询的结果上继续操作,这样逻辑清晰,又不会出错.但在使用ToList的时候需要注意,最常见碰到的错误是: ...

  10. [Erlang31]Erlang trace总结

    在一个并行的世界里面,我们很难做到单步断点调试来定位问题(太多的消息飞来飞去),Erlang设计者也深刻体会到这一点,推出了另一个trace机制. 通过这个trace,你可以: .特定进程集内的函数调 ...