JavaScript 实现表格列宽拖拽调整功能的方法

在网页开发中，表格是展示数据的常用方式。有时，为了提升用户体验，让用户能够根据自己的需求灵活调整表格列宽，实现列宽拖拽调整功能就显得尤为重要。借助 JavaScript，我们可以轻松达成这一目标。

需要构建基本的 HTML 表格结构。创建一个简单的表格，包含表头和表体，每列数据都有相应的单元格。例如：

<table id="myTable">
    <thead>
        <tr>
            <th id="col1">列1</th>
            <th id="col2">列2</th>
            <th id="col3">列3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
        </tr>
    </tbody>
</table>

接着，使用 JavaScript 为每列添加可拖拽的交互。关键在于监听鼠标的按下、移动和释放事件。当鼠标按下某一列的边界时，记录当前鼠标位置和该列的初始宽度；鼠标移动时，根据鼠标移动的距离来动态改变列的宽度；鼠标释放时，停止调整。

const columns = document.querySelectorAll('th');
let isDragging = false;
let startX;
let initialWidth;

columns.forEach(column => {
    column.addEventListener('mousedown', (e) => {
        isDragging = true;
        startX = e.pageX;
        initialWidth = column.offsetWidth;
    });
});

document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        const diffX = e.pageX - startX;
        const newWidth = initialWidth + diffX;
        column.style.width = newWidth + 'px';
    }
});

document.addEventListener('mouseup', () => {
    isDragging = false;
});

为了让效果更流畅，还可以添加一些样式优化。比如，当鼠标悬停在列边界时，将鼠标指针变为可调整大小的样式。

th {
    cursor: col-resize;
}

通过上述步骤，就成功实现了表格列宽的拖拽调整功能。这样，用户在浏览表格数据时，能够根据实际需求自由调整列宽，使数据展示更加清晰和符合个人使用习惯。无论是小型项目还是大型企业级应用，这一功能都能有效提升用户与表格的交互体验，让网页应用更加人性化和便捷。