JS可改变列宽table
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>table</title>
</head>
<body>
<table id="tb_1" cellspacing="0" cellpadding="2" width="100%" border="1">
<tbody>
<tr align="center" bgcolor="#dcdcdc">
<td style="width:100px;">用户编号</td>
<td>试用时间</td><td>转正时间</td><td>性别</td><td>姓名拼音</td>
<td>生日时间</td><td>民族</td><td>身高</td>
</tr>
<tr>
<td>2000001</td>
<td>1997-3-13</td><td>1997-3-13</td><td>1</td><td>WZJ</td>
<td>1965-3-13</td><td>汉</td><td>171</td>
</tr>
<tr>
<td>2000045</td>
<td>2001-2-15</td><td>2001-3-15</td><td>0</td><td>WY</td>
<td>1978-8-5</td><td>汉</td><td>162</td>
</tr>
<tr>
<td>2000046</td>
<td>2001-2-23</td><td>2001-3-23</td><td>0</td><td>LQ</td>
<td>2001-2-23</td><td>汉</td><td>171</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
var table = document.getElementById("tb_1");
for (j = 0; j < table.rows[0].cells.length; j++) {
table.rows[0].cells[j].onmousedown = function () {
//记录单元格
tTD = this;
if (event.offsetX > tTD.offsetWidth - 10) {
tTD.mouseDown = true;
tTD.oldX = event.x;
tTD.oldWidth = tTD.offsetWidth;
}
//记录Table宽度
//table = tTD; while (table.tagName != ‘TABLE’) table = table.parentElement;
//tTD.tableWidth = table.offsetWidth;
};
table.rows[0].cells[j].onmouseup = function () {
//结束宽度调整
if (tTD == undefined) tTD = this; tTD.mouseDown = false;
tTD.style.cursor = 'default';
};
table.rows[0].cells[j].onmousemove = function () {
//更改鼠标样式
if (event.offsetX > this.offsetWidth - 10)
this.style.cursor = 'col-resize';
else
this.style.cursor = 'default'; //取出暂存的Table Cell
if (tTD == undefined) tTD = this; //调整宽度
if (tTD.mouseDown != null && tTD.mouseDown == true) {
tTD.style.cursor = 'default';
if (tTD.oldWidth + (event.x - tTD.oldX)>0)
tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
//调整列宽
tTD.style.width = tTD.width;
tTD.style.cursor = 'col-resize';
//调整该列中的每个Cell
table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;
for (j = 0; j < table.rows.length; j++) {
table.rows[j].cells[tTD.cellIndex].width = tTD.width;
}
//调整整个表
//table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
//table.style.width = table.width;
}
};
} </script>
</body>
</html>
JS可改变列宽table的更多相关文章
- display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
- JS实现表格列宽拖动
在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- 动态改变EasyUI grid 列宽和隐藏列
隐藏显示 $('#yourGrid').datagrid('hideColumn','yourColumn'); $('#yourGrid').datagrid('hideColumn','yourC ...
- jquery实现表格可变列宽插件开发
工作中用到了表格的可变列宽,网上看了下,自己也实现了一个,整理贴记录. 测试环境chrome,ie8,firefox jquery版本1.8.2 原理:监听table第一行的mousemove事件,当 ...
- JQuery 表格拖动调整列宽效果
类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动 ...
- WPF学习笔记（3）：ListView根据内容自动调整列宽
DataGrid中,只要不设置DataGrid的宽度和列宽度,或者将宽度设置为Auto,那么表格就会根据内容自动调整宽度,以显示所有内容.但如果是ListView,按以上方法设置,却达不到列宽自动调整 ...
- js 实现table每列可左右拖动改变列宽度 【转载】
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
- 原生js实现table表格列宽自由缩放
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...
随机推荐
- 如何实现SAP的RFC函数调用(原创)
连接sap系统需要通过sap javaconnect来连接,对于sapjco.jar系列文件有32位与64位之分[32位用的JAR版本是 2.1.10 (2011-05-10) ,64位用的JAR版本 ...
- Netsharp介绍
1.1 Netsharp是什么 Netsharp定义: Netsharp业务基础平台 = 1.系统框架 + 2.元数据 + 3.平台工具 + 4.基础业务 + 5.二次开发 此五个概念请参考什 ...
- Function模式 -- 深入理解javascript
/* 一.回调函数 函数A作为另外一个函数B的参数 */ var menuId = $("ul.nav").first().attr("id"); var re ...
- python 数据结构-列表
列表常用方法汇总: #定义列表li li=[12.23,456,88,9] a=[1,2,3] #添加元素到列表结尾 li.append(360) #追加列表元素extend(L) li.extend ...
- 【python】文件的输入和输出
1.os模块 2.os.path 模块 3.实例 1. os模块 对文件系统的访问大多通过python的os模块实现,其中os 模块负责大部分的文件系统操作,包括删除/重命名文件,遍历目录树,管理文件 ...
- 【BZOJ】【1059】【ZJOI2007】矩阵游戏
二分图完美匹配/匈牙利算法 如果a[i][j]为黑点,我们就连边 i->j ,然后跑二分图最大匹配,看是否有完美匹配. <_<我们先考虑行变换:对于第 i 行,如果它第 j 位是黑点 ...
- C#获取网页中的验证码图片（转载）
有时候我们需要获得网页上的图片,尤其是向验证码这样的图片.这个方法就是将网页上的图片获取到PictureBox中.效果入下图所示. 右边是使用Webbrowser控件装载的某网站的注册页面,其中包括了 ...
- ASP.NET中读取excel内容并显示
项目中经常会用到把excel的文件内容导入到数据库中的,刚刚花了点时间,做了个例子,基本上能实现导入Excel后显示的功能吧,导入的excel文件得是xls,即是2003的. 代码思路如下:要 ...
- 8086CPU各寄存器的用途
8086 有14个16位寄存器,这14个寄存器按其用途可分为(1)通用寄存器.(2)指令指针.(3)标志寄存器和(4)段寄存器等4类. 1.通用寄存器有8个, 又可以分成2组,一组是数据寄存器(4个) ...
- Python中编码问题？
一.键盘输入 raw_input('请输入:'.decode('utf-8').encode('gbk'))raw_input(unicode('请输入:','utf-8').encode('gbk' ...