JS实现表格一列宽度拖拽

最新推荐文章于 2025-05-12 16:28:28 发布

xueyong4712816

最新推荐文章于 2025-05-12 16:28:28 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

文章标签： function null scroll border

本文链接：https://blog.csdn.net/xueyong4712816/article/details/6523945

该博客介绍了如何使用JavaScript实现HTML表格中列宽的拖动调整功能。通过添加鼠标事件监听，当鼠标进入表格列头时，改变鼠标样式，允许用户通过拖动调整列宽。代码示例中包含了实现这一功能的关键函数和CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" src="../JS/jquery-1.3.2-vsdoc2.js"></script>
<title>ResizeTable</title>
<style type="text/css">
td, th
{
height: 20px;
border: solid 1px black;
}
body
{
overflow:scroll;
}
</style>
<script type="text/javascript">
function getoffset(src) {
var ct = 0; //获取控件相对于顶部的位置
var cl = 0; //获取控件相对于左边的位置
var p = src;
while (p.offsetParent) {
ct += p.offsetTop;
cl += p.offsetLeft;
pp = p.offsetParent;
}
return [ct, cl, src.clientWidth, src.clientHeight]
}
function enter(src, e) {
if (!document.down) {
document.resizeControl = src;
}
}
// $(document).ready(function() {
// $("th").mouseover(function() {
// $("th").style.cursor = "W-resize";
// });
// } );
//鼠标松开实现方法，设置图标为箭头，清空一些全局变量。重置document.down = null
document.onmouseup = function() {
document.down = null;
var src = document.resizeControl;
if (src) {
src.style.cursor=null;
src.resize = null;
src.srcData = null;
document.resizeControl = null;
}
}
//鼠标点击方法，
document.onmousedown = function(e) {
document.down = 1;
if (document.resizeControl) {
var src = document.resizeControl;
var srcData = getoffset(src);
var eev = e || event;
var cX = ev.clientX;
var cY = ev.clientY;
if (cY >= srcData[0] && cY <= srcData[0] + srcData[3] && cX >= srcData[1] + srcData[2] - 10 && cX <= srcData[1] + srcData[2]) {
src.srcData = [src.clientWidth, ev.clientX];
src.resize = 1;
}
}
}
//鼠标移动方法
document.onmousemove = function(e) {
if (document.resizeControl) {
var src = document.resizeControl;
var srcData = getoffset(src);
var eev = e || event;
var cX = ev.clientX;
var cY = ev.clientY;
//如果可以扩充，则改变鼠标样子。
if (cY >= srcData[0] && cY <= srcData[0] + srcData[3] && cX >= srcData[1] + srcData[2] - 10 && cX <= srcData[1] + srcData[2]) {
src.style.cursor = "W-resize";
}
else {
if (!document.down) {
src.style.cursor = null;
}
}
if (document.down && src.resize) {
// 自身长度+增量
//var newWidth = src.srcData[0] + cX - src.srcData[1];
var newWidth = src.srcData[0] +cX - src.srcData[1];
if(newWidth > 0)
{
src.style.width= (newWidth).toString() + "px";
}
}
}
}
</script>
</head>
<body>
<table style="table-layout: auto;" cellspacing="0" cellpadding="0" rules="all">
<tr>
<th onclick="enter(this);" style="width: 100px;">
序号
</th>
<th onclick="enter(this);" style="width: 100px;">
物料编码
</th>
<th onclick="enter(this);" style="width: 100px;">
零配件名称
</th>
<th onclick="enter(this);" style="width: 100px;">
规格型号
</th>
<th onclick="enter(this);" style="width: 100px;">
图号
</th>
<th onclick="enter(this);" style="width: 100px;">
计量单位
</th>
<th onclick="enter(this);" style="width: 100px;">
数量
</th>
<th onclick="enter(this);" style="width: 100px;">
金额
</th>
</tr>
<tr>
<td>
1
</td>
<td>
</td>
<td>
减震座
</td>
<td>
6406
</td>
<td>
</td>
<td>
件
</td>
<td>
10
</td>
<td>
30
</td>
</tr>
<tr>
<td>
2
</td>
<td>
</td>
<td>
压簧
</td>
<td>
13045045
</td>
<td>
</td>
<td>
件
</td>
<td>
20
</td>
<td>
143.9
</td>
</tr>
<tr>
<td>
3
</td>
<td>
</td>
<td>
销
</td>
<td>
14006010
</td>
<td>
</td>
<td>
件
</td>
<td>
4
</td>
<td>
196
</td>
</tr>
<tr>
<td>
4
</td>
<td>
</td>
<td>
销
</td>
<td>
2519705006
</td>
<td>
</td>
<td>
件
</td>
<td>
2
</td>
<td>
330
</td>
</tr>
<tr>
<td>
5
</td>
<td>
</td>
<td>
销
</td>
<td>
2519740119
</td>
<td>
</td>
<td>
件
</td>
<td>
2
</td>
<td>
90
</td>
</tr>
<tr>
<td>
6
</td>
<td>
</td>
<td>
压簧
</td>
<td>
0.5*7*13
</td>
<td>
</td>
<td>
件
</td>
<td>
2
</td>
<td>
1.66
</td>
</tr>
<tr>
<td>
7
</td>
<td>
</td>
<td>
滚轮
</td>
<td>
0012001032
</td>
<td>
</td>
<td>
件
</td>
<td>
10
</td>
<td>
1170
</td>
</tr>
<tr>
<td>
8
</td>
<td>
</td>
<td>
弹簧
</td>
<td>
0014015085
</td>
<td>
</td>
<td>
件
</td>
<td>
10
</td>
<td>
100
</td>
</tr>
<tr>
<td>
9
</td>
<td>
</td>
<td>
销
</td>
<td>
0033010039
</td>
<td>
</td>
<td>
件
</td>
<td>
10
</td>
<td>
680
</td>
</tr>
<tr>
<td>
10
</td>
<td>
</td>
<td>
衬套
</td>
<td>
0035010014
</td>
<td>
</td>
<td>
件
</td>
<td>
4
</td>
<td>
828
</td>
</tr>
<tr>
<td>
11
</td>
<td>
</td>
<td>
衬套
</td>
<td>
0053013045
</td>
<td>
</td>
<td>
件
</td>
<td>
10
</td>
<td>
180
</td>
</tr>
<tr>
<td>
12
</td>
<td>
</td>
<td>
销
</td>
<td>
0059002028
</td>
<td>
</td>
<td>
件
</td>
<td>
5
</td>
<td>
382
</td>
</tr>
</table>
</body>
</html>