JS实现表格列宽拖动

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

1 效果

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

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

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

转载于:https://www.cnblogs.com/yuwenjing0727/p/7723739.html

JS实现表格列宽拖动相关推荐

php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码，类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
【java基础知识】设置表格内容居中显示，表格字体大小调整，表格列宽调整
一.表格内容居中显示通过Netbeans创建表格后,默认表头和表格内容全部偏左显示,想要手动修改,需要先将自动创建的表格类改为public类型. 然后在表格代码部分后面添加下面代码: 1.表头居中显 ...
计算机表格列宽怎么设置,表格列宽怎么设置厘米
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以Excel为例,表格列宽设置厘米的操作方法如下: 1.打开表格,将鼠标放在一列的表头,单击右键,在弹出的标签里选择列宽: 2.点 ...
JAVA使用POI-TL生成word表格列宽自定义
上篇文章介绍了如何使用POI-TL对生成的表格进行列宽自适应和表格内容居中.使用poi-tl组件根据模板生成word文件(解决表格列宽自适应问题) 今天又接到一个需求,如何自定义表格的列宽? 研究了P ...
table表格列宽动态调整方案
在做表格的时候,设置好的列宽却因为数据太长导致换行,想让它自己调整宽度,但是现在elementUI组件好像还没有这个功能.所以自己写了一个方法实现它. 一个动态改变表格列宽的方法该方法实现了自适应列 ...
word表格列宽如何设置？
word虽然大部分都是用来做内容编辑,但实际上也有表格功能哦!插入表格并不难,那么word表格列宽如何设置?方法简单易懂,大家动动手学起来! 步骤1.我们从头到尾说一次吧!先打开一个word文档: 步 ...
Typora 使用技巧2 -- 强制换行，修改表格列宽
强制换行将光标定位于想要换行的位置,按 Ctrl + Enter 例如,在想两个已编辑好的代码块间插入空行插入空行前插入空行后修改表格列宽在表头输入足够的空格即可(若居中对齐,则在左侧和右侧 ...
java制作九行九列表格_将文中后9行文字转换成一个9行4列的表格，设置表格居中，表格列宽为2．5厘米..._考试资料网...
问答题在考生文件夹下打开文档word．docx,按照要求完成下列操作并以该文件名(word．docx)保存文档. [文档开始] 2009年北平市中考招生计划低于10万人晨报讯伴随初中毕业生人数连年下 ...
Safari浏览器下colgroup失效导致表格列宽均分
Safari浏览器下colgroup失效导致表格列宽均分表现原因解决表现使用原生tabel标签写表格,由于需要对表头做特殊处理,所以采用两个表格组装的方式写,表头也是用单独的table标签写 ...

JS实现表格列宽拖动

1 效果

2 代码

JS实现表格列宽拖动相关推荐

最新文章

热门文章