JS实现表格列宽拖动
在数据表格中，有时候需要拖动表格宽度，查看完整的数据，是很常用的功能。
1 效果
可以用纯JS就可以实现，如下，是正常情况下的表格：
拖动表格标题中间线，拖动后效果如下：
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实现表格列宽拖动的更多相关文章
- jQuery表格列宽可变，兼容firfox
本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").mo ...
- 使用jqueryUI实现自由调整表格列宽
今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实 ...
- 原生js实现table表格列宽自由缩放
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...
- 原生js实现 table表格列宽拖拽
查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- 转！！Java JTable 根据表格内容 自动调整表格列宽
//根据表格内容 自动调整列宽http://blog.sina.com.cn/s/blog_5e54d6140100s1d3.html
- eas之添加表格列宽自动调整设置
设置表格整体宽度自动调整为所在panel的宽度 KDTable table=new KDTable(); table. setAutoResize (boolean); 注意:该功能在冻结功能启用后, ...
- java表格操作之设置表格列宽
设置所有列的宽度 /** * 设置所有列的列宽 * @param table * @param width */ public void setAllColumnWidth(JTable table, ...
- JS可改变列宽table
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
随机推荐
- oracle 查询死锁
--查询死锁 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.locked ...
- Facebook对MySQL全表扫描性能的改进
原文博客如下: http://yoshinorimatsunobu.blogspot.com/2013/10/making-full-table-scan-10x-faster-in.html 如下是 ...
- Android 实现在Activity中操作刷新另外一个Activity数据列表
做android项目中遇到这样一个问题:有两个acticity,一个显示好友列表,另外一个显示会话列表,现在问题是在会话界面增加一个添加好友功能,添加好友后要求实时的刷新好友列表. 想了想,找了两种方 ...
- DataStage 一、安装
安装的详细信息记录于文档中,文档下载地址:http://pan.baidu.com/s/1pJCF9uN 密码: y2ry ;文档内容目录如下: DataStage 一.介绍和安装.......... ...
- 跟微软保持适当距离--Hessian + .net 实现RPC体系的企业应用
同在一个产业链园区的XX厂因为5台Window2003服务器收到了律师函并且被迫下了12万$的采购单,虽然100万对XXX厂来数不是大数目,但是总有种被打劫的感觉. 在企业ERP应用中服务层一般都是做 ...
- C++中函数模版与类模版
1.什么是模板? (1)可以这样来解释这个问题,例如当我们需要定义多个函数,而这个函数功能其实都是一样的,例如两个数相加的函数, 只是相加的两个数的类型不相同而已,这就导致我们需要定义多个函数:当我们 ...
- RocketMQ 运维指令
1.1. 控制台使用 RocketMQ 提供有控制台及一系列控制台命令,用于管理员对主题,集群,broker 等信息的管理 登录控制台 首先进入RocketMQ 工程,进入/RocketMQ/bin ...
- Java之RandomAccessFile小结
今天跟大家分享一下javase中的关于I/O的操作: 有时我们需要在文件的末尾追加一些内容,在这时用RandomAccessFile就很好. 这个类有两个构造方法: RandomAccessFile( ...
- SQL Server触发器的基本使用
sqlserver_SQL触发器的使用及语法(转自:百度文库) 定义: 何为触发器?在SQL Server里面也就是对某一个表的一定的操作,触发某种条件,从而执行的一段程序.触发器是一个特殊的存储过程 ...
- Java Web系列：Java Web 项目基础
1.Java Web 模块结构 JSP文件和AXPX文件类似,路径和URL一一对应,都会被动态编译为单独class.Java Web和ASP.NET的核心是分别是Servlet和IHttpHandle ...