如何使用 JavaScript 實(shí)作表格列寬拖曳調(diào)整功能？

隨著 Web 技術(shù)的發(fā)展，越來越多的資料以表格的形式展示在網(wǎng)頁上。然而，有時(shí)候表格的列寬並不能滿足我們的需求，可能會(huì)出現(xiàn)內(nèi)容溢出或?qū)挾炔蛔愕那闆r。為了解決這個(gè)問題，我們可以使用 JavaScript 實(shí)作表格的列寬拖曳調(diào)整功能，使用戶可以根據(jù)需求自由調(diào)整列寬。

實(shí)作表格列寬拖曳調(diào)整功能，需要以下三個(gè)主要步驟：

1. 滑鼠事件監(jiān)聽：需要為表格新增滑鼠事件監(jiān)聽，以便擷取使用者的操作行為。
2. 動(dòng)態(tài)調(diào)整列寬：根據(jù)使用者的拖曳操作，動(dòng)態(tài)調(diào)整表格列的寬度。
3. 記錄表格狀態(tài)：記錄使用者調(diào)整後的列寬狀態(tài)，以便在頁面重新整理或重新載入後保持調(diào)整結(jié)果。

以下將具體介紹以上三個(gè)步驟的實(shí)作方法，並給出對應(yīng)的程式碼範(fàn)例。

1. 滑鼠事件監(jiān)聽

首先，為表格新增 mousedown 事件監(jiān)聽。當(dāng)使用者點(diǎn)擊表格列邊緣時(shí)，可以開始拖曳調(diào)整列寬。在 mousedown 事件處理函數(shù)中，需要記錄滑鼠點(diǎn)擊的位置。

function tableMouseDown(event) {
  // 記錄鼠標(biāo)點(diǎn)擊的位置
  const startX = event.clientX;
  // ...
}

接著，為 document 物件新增 mousemove 事件監(jiān)聽。在 mousemove 事件處理函數(shù)中，需要計(jì)算滑鼠移動(dòng)的距離，並動(dòng)態(tài)改變表格列的寬度。

function documentMouseMove(event) {
  // 計(jì)算鼠標(biāo)移動(dòng)的距離
  const distanceX = event.clientX - startX;
  // 動(dòng)態(tài)改變表格列的寬度
  // ...
}

最後，為 document 物件新增 mouseup 事件監(jiān)聽。當(dāng)使用者釋放滑鼠時(shí)，停止調(diào)整列寬。

function documentMouseUp() {
  // 停止調(diào)整列寬
  // ...
}

2. 動(dòng)態(tài)調(diào)整列寬

在 mousemove 事件處理函數(shù)中，根據(jù)使用者的拖曳操作，動(dòng)態(tài)調(diào)整表格列的寬度。首先，需要確定目前拖曳的是哪一列，可以透過表格頭部的 th 元素來確定。然後，根據(jù)計(jì)算得到的滑鼠移動(dòng)距離，動(dòng)態(tài)改變表格列的寬度。

function documentMouseMove(event) {
  // 計(jì)算鼠標(biāo)移動(dòng)的距離
  const distanceX = event.clientX - startX;
  
  // 動(dòng)態(tài)改變表格列的寬度
  const th = document.elementFromPoint(startX, event.clientY);
  const columnIndex = th.cellIndex;
  const table = th.parentNode.parentNode.parentNode;
  const cells = table.querySelectorAll(`tr th:nth-child(${columnIndex + 1}), tr td:nth-child(${columnIndex + 1})`);

  const newWidth = parseFloat(getComputedStyle(cells[0]).width) + distanceX;
  for (const cell of cells) {
    cell.style.width = `${newWidth}px`;
  }
}

3. 記錄表格狀態(tài)

為了在頁面重新整理或重新載入後保持使用者調(diào)整的列寬，我們需要將表格的列寬狀態(tài)記錄下來?？梢允褂?localStorage 或 cookie 來實(shí)現(xiàn)資料的持久化保存。

function documentMouseUp() {
  // 停止調(diào)整列寬
  // ...

  // 記錄表格的列寬狀態(tài)
  const columnWidths = {};
  const table = document.querySelector('table');
  const columns = table.querySelectorAll('th');
  for (const column of columns) {
    columnWidths[column.cellIndex] = parseFloat(getComputedStyle(column).width);
  }
  
  localStorage.setItem('columnWidths', JSON.stringify(columnWidths));
}

在頁面載入時(shí)，可以從 localStorage 讀取已儲(chǔ)存的列寬狀態(tài)，並將其套用到表格上。

window.addEventListener('load', function() {
  const columnWidths = JSON.parse(localStorage.getItem('columnWidths'));
  if (columnWidths) {
    const table = document.querySelector('table');
    const columns = table.querySelectorAll('th');
    for (const [index, width] of Object.entries(columnWidths)) {
      columns[index].style.width = `${width}px`;
    }
  }
});

透過以上三個(gè)步驟，我們可以實(shí)現(xiàn)表格列寬的拖曳調(diào)整功能。使用者可依實(shí)際需求，自由調(diào)整表格的列寬，優(yōu)化表格的顯示效果。希望本文對你有幫助！

以上是如何使用 JavaScript 實(shí)作表格列寬拖曳調(diào)整功能？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！