zoukankan      html  css  js  c++  java
  • JS实现表格列宽拖动

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

    1 效果

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

    tabsize1

    拖动表格标题中间线,拖动后效果如下:

    tabsize2

    查看DEMO

    2 代码

    HTML代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>演示</title>
     5     <script type="text/javascript" src="tabSize.js"></script>
     6     <script type="text/javascript">
     7         window.onload = function() {
     8             tabSize.init('resizeTable');
     9         };
    10     </script>
    11     <style>
    12         .resizeBox{overflow-x: auto; width: 500px;}
    13         table{width: 100%;border: 1px solid #000;border-collapse:collapse;}
    14         th{background: #ccc;}
    15         th, td{border: 1px solid #000;}
    16     </style>
    17 </head>
    18 <body>
    19 <div class="resizeBox">
    20     <table id="resizeTable">
    21         <thead>
    22         <tr><th>标题1</th><th>标题2</th><th>标题3</th></tr>
    23         </thead>
    24         <tbody>
    25         <tr><td>第1行</td><td>第1行</td><td>第1行</td></tr>
    26         <tr><td>第2行</td><td>第2行</td><td>第1行</td></tr>
    27         <tr><td>第3行</td><td>第3行</td><td>第1行</td></tr>
    28         </tbody>
    29     </table>
    30 </div>
    31 </body>
    32 </html>

    JS代码:

     1 /**
     2  * Created by ywj on 2017/10/24.
     3  */
     4 "use strict";
     5 var tabSize = tabSize || {};
     6 tabSize.init = function (id) {
     7     var i,
     8         self,
     9         table = document.getElementById(id),
    10         header = table.rows[0],
    11         tableX = header.clientWidth,
    12         length = header.cells.length;
    13 
    14     for (i = 0; i < length; i++) {
    15         header.cells[i].onmousedown = function () {
    16             self = this;
    17             if (event.offsetX > self.offsetWidth - 10) {
    18                 self.mouseDown = true;
    19                 self.oldX = event.x;
    20                 self.oldWidth = self.offsetWidth;
    21             }
    22         };
    23         header.cells[i].onmousemove = function () {
    24             if (event.offsetX > this.offsetWidth - 10) {
    25                 this.style.cursor = 'col-resize';
    26             } else {
    27                 this.style.cursor = 'default';
    28             }
    29             if (self == undefined) {
    30                 self = this;
    31             }
    32             if (self.mouseDown != null && self.mouseDown == true) {
    33                 self.style.cursor = 'default';
    34                 if (self.oldWidth + (event.x - self.oldX) > 0) {
    35                     self.width = self.oldWidth + (event.x - self.oldX);
    36                 }
    37                 self.style.width = self.width;
    38                 table.style.width = tableX + (event.x - self.oldX) + 'px';
    39                 self.style.cursor = 'col-resize';
    40             }
    41         };
    42         table.onmouseup = function () {
    43             if (self == undefined) {
    44                 self = this;
    45             }
    46             self.mouseDown = false;
    47             self.style.cursor = 'default';
    48             tableX = header.clientWidth;
    49         };
    50     }
    51 };
  • 相关阅读:
    SHA1加密算法 java
    CMD命令名详细大全
    springMVC get请求及其请求地址写法
    webService 接口调用配置
    使用jdk操作 wsdl2java (wedservice)
    编码问题(utf-8,gbk,utf-16be)
    9 个让 JavaScript 调试更简单的 Console 命令
    让姑姑不再划拳 码农也要有原则 : SOLID via C#
    工欲善其事,必先利其器 之 VS2013全攻略(安装,技巧,快捷键,插件)!
    2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/7723739.html
Copyright © 2011-2022 走看看