table拖动列宽

最新推荐文章于 2023-06-12 15:42:50 发布

黑衣教主

最新推荐文章于 2023-06-12 15:42:50 发布

阅读量629

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/webczw/article/details/42711023

本文介绍了如何在表格中实现单元格宽度的动态调整，包括记录单元格、判断鼠标位置并调整宽度等功能。

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

var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 
var table = document.getElementById("content");
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.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.onmouseup=function(){
	//结束宽度调整
	if (tTD == undefined) tTD = this;
	tTD.mouseDown = false;
	tTD.style.cursor = 'default';
};