拖动表格宽度

最新推荐文章于 2024-07-16 11:11:43 发布

rxbtalent

最新推荐文章于 2024-07-16 11:11:43 发布

阅读量292

点赞数

分类专栏： js 文章标签： js

原文链接：https://www.cnblogs.com/yuwenjing0727/p/7723739.html

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

1 效果

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

拖动表格标题中间线，拖动后效果如下：

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代码：

/**
 * Created by ywj on 2019/09/02.
 */
"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;
        };
    }
};