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 };

 

posted @ 2017-10-24 15:21  yuwenjing  阅读(7811)  评论(1)  编辑  收藏  举报