html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽

实现 HTML 表格宽度拖拽，可以使用原生 JavaScript 来实现。以下是一个简单的实现方式：

HTML 代码：

<table id="myTable">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table>

JavaScript 代码：

var table = document.getElementById("myTable");
var isResizing = false;
var lastDownX = 0;

// 设置每列的初始宽度
var columnWidths = [100, 100, 100];
for (var i = 0; i < table.rows[0].cells.length; i++) {
  table.rows[0].cells[i].style.width = columnWidths[i] + "px";
}

// 鼠标按下时记录位置
table.addEventListener("mousedown", function (e) {
  isResizing = true;
  lastDownX = e.clientX;
});

// 鼠标移动时改变列宽度
table.addEventListener("mousemove", function (e) {
  if (!isResizing) {
    return;
  }

  var cell = e.target.parentElement;
  var cellIndex = Array.from(cell.parentElement.children).indexOf(cell);
  var widthDiff = e.clientX - lastDownX;

  // 改变当前列的宽度
  var newWidth = columnWidths[cellIndex] + widthDiff;
  if (newWidth > 0) {
    cell.style.width = newWidth + "px";
    columnWidths[cellIndex] = newWidth;
    lastDownX = e.clientX;
  }
});

// 鼠标抬起时停止改变列宽度
table.addEventListener("mouseup", function (e) {
  isResizing = false;
});

以上代码会在表格中添加一个鼠标事件监听器，当用户按下鼠标并移动时，会根据鼠标的位置改变被选中列的宽度。需要注意的是，当用户拖动列宽度时，应该记录每列的初始宽度（在这里使用了 `columnWidths` 数组来记录），并在移动过程中修改当前列的宽度，而不是仅仅修改当前列的宽度。