JS实现表格一列宽度拖拽

最新推荐文章于 2024-07-29 17:39:57 发布

xueyong4712816

最新推荐文章于 2024-07-29 17:39:57 发布

阅读量4.7k

点赞数

文章标签： function null scroll border

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

版权

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

摘要由CSDN通过智能技术生成

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 =