js拖动调整表格列宽

基础概念

在JavaScript中实现表格列宽的拖动调整，通常涉及到以下几个基础概念：

事件监听：监听鼠标按下（mousedown）、移动（mousemove）和释放（mouseup）事件。
DOM操作：获取和修改表格列的宽度。
坐标计算：计算鼠标位置与列边界的相对位置，以确定新的列宽。

类型与应用场景

固定列宽：适用于列内容较为统一且重要的场景。
可变列宽：适用于内容多样或需要根据用户偏好调整的场景。
响应式列宽：结合媒体查询和JavaScript，实现不同设备上的自适应列宽。

实现步骤与示例代码

以下是一个简单的JavaScript示例，展示如何实现表格列宽的拖动调整：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag to Resize Table Columns</title>
<style>
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ddd; padding: 8px; }
  .resizer { position: absolute; top: 0; right: 0; width: 5px; height: 100%; cursor: col-resize; }
</style>
</head>
<body>

<table id="myTable">
  <thead>
    <tr>
      <th>Header 1 <span class="resizer"></span></th>
      <th>Header 2 <span class="resizer"></span></th>
      <th>Header 3 <span class="resizer"></span></th>
    </tr>
  </thead>
  <tbody>
    <!-- Table rows here -->
  </tbody>
</table>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const table = document.getElementById('myTable');
  let resizingColumn = null;
  let startX, startWidth;

  table.querySelectorAll('.resizer').forEach(resizer => {
    resizer.addEventListener('mousedown', function(e) {
      resizingColumn = e.target.parentElement;
      startX = e.pageX;
      startWidth = parseInt(document.defaultView.getComputedStyle(resizingColumn).width, 10);
      document.addEventListener('mousemove', resizeColumn);
      document.addEventListener('mouseup', stopResize);
    });
  });

  function resizeColumn(e) {
    const offsetX = e.pageX - startX;
    resizingColumn.style.width = (startWidth + offsetX) + 'px';
  }

  function stopResize() {
    document.removeEventListener('mousemove', resizeColumn);
    document.removeEventListener('mouseup', stopResize);
    resizingColumn = null;
  }
});
</script>

</body>
</html>