js实现table用鼠标改变td的宽度,固定table宽度和高度超过显示点
2024-10-19 08:58:41
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>table</title>
<style>
.ztable {
table-layout: fixed;
font-size: 12px;
font-family: 微软雅黑;
border-right: 1px solid #D4D4D4;
border-bottom: 1px solid #D4D4D4;
} .ztable th {
background-color: #F0F0F0;
height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-left: 1px solid #D4D4D4;
border-top: 1px solid #D4D4D4;
} .ztable td {
border-left: 1px solid #D4D4D4;
border-top: 1px solid #D4D4D4;
height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<table id="tb_1" cellspacing="0" cellpadding="0" width="600" class="ztable">
<tbody>
<tr align="center">
<th style="width: 100px;">用户编号</th>
<th style="width: 100px;">试用时间</th>
<th style="width: 100px;">转正时间</th>
<th style="width: 100px;">性别</th>
<th>姓名拼音</th>
<th>生日时间</th>
<th>民族</th>
<th>身高</th>
</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>
最新文章
- sudo su权限案例
- WPF元素可视化效果
- [platform]linux platform device/driver(一)--Driver是如何找到对应的device
- 函数fsp_fill_free_list
- 网上图书商城项目学习笔记-036工具类之CommonUtils及日期转换器
- 习题3.10 约瑟夫环 josephus问题
- PAT (Basic Level) Practise (中文)-1021. 个位数统计 (15)
- 面向对象之原型——challenge
- shell中的数字
- C# 替换Word文本—— 用文档、图片、表格替换文本
- Atcoder刷题小记
- elasticsearch 6.2.4添加用户密码认证
- PyQt5的安装及基本配置
- Keil 报错汇总
- hdu 4521 小明系列问题——小明序列 线段树+二分
- tomcat下部署了多个项目启动报错java web error:Choose unique values for the &#39;webAppRootKey&#39; context-param in your web.xml files
- 关于VS2013的安装遇到的问题
- spring 整合 mybatis (不含物理分页)
- SQL SERVER技术内幕之8 分组集
- Python 编程实战提高测试工作效率实例之svn 文件管理
热门文章
- Codeforces1063D Candies for Children 【分类讨论】【暴力】
- 【XSY2741】网格 分治 LCT 并查集
- C#中equal与==的区别
- PHP 公共方法分享180628
- Jeesite 自定义api接口 404 访问不到页面
- 【模板】cdq分治代替树状数组(单点修改,区间查询)
- [luogu1452]Beauty Contest【凸包+旋转卡壳】
- 【转】从此以后谁也别说我不懂LDO了!
- CodeVS1288埃及分数(IDA*)
- Dubbo x Cloud Native 服务架构长文总结(很全)