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

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. java 主类的main方法调用其他方法

    方法1:A a=new test().new A(); 内部类对象通过外部类的实例对象调用其内部类构造方法产生,如下: public class test{ class A{ void fA(){ S ...

  2. velocity在html中换行符转换

    <td colspan="3" class="tdContent2">$!obj.getDealInfo().replaceAll("\r ...

  3. 11 Mortal Fibonacci Rabbits

    Problem Figure 4. A figure illustrating the propagation of Fibonacci's rabbits if they die after thr ...

  4. centos7安装kubernetes 1.1

    原文地址:http://foxhound.blog.51cto.com/1167932/1717105 前提:centos7 已经update yum update -y 一.创建yum源 maste ...

  5. linux中的 tar命令的 -C 参数,以及其它一些参数

    tar命令的-C参数    $ tar -cvf file2.tar /home/usr2/file2 tar: Removing leading '/' from members names hom ...

  6. 使用js/jquery查找iframe中的

    原生js  一.在iframe的父窗口中获取iframe中的元素: js代码 格式: window.frames["iframe的name值"].document.getEleme ...

  7. swift学习之-- UIAlertVIewController - uiactionsheet

    // //  ViewController.swift //  actionsheet // //  Created by su on 15/12/7. //  Copyright © 2015年 t ...

  8. awk基础04-内置函数

        在awk中常用的内置函数大概分为:数值函数.字符函数.时间函数.二进制操作函数.数组函数.自定义函数等. 数值函数   常用的数值函数主要有int.rand.srand.sqrt等.详细如下所 ...

  9. 试题 H: 人物相关性分析 第十届蓝桥杯

    试题 H: 人物相关性分析时间限制: 1.0s 内存限制: 512.0MB 本题总分: 20 分[问题描述]小明正在分析一本小说中的人物相关性.他想知道在小说中 Alice 和 Bob有多少次同时出现 ...

  10. （译）C#参数传递

    前言 菜鸟去重复之Sql的问题还没有得到满意的答案.如果哪位大哥有相关的资料解释,能够分享给我,那就太谢谢了. 接触C#一年了,感觉很多东西还是很模糊,像C#中的委托和事件 有些东西看多了不用也还是不 ...