使用JavaScript實現表格資料的線上編輯

在現代網路應用程式中，表格是一個常見的UI元件，用於展示和編輯資料。在某些情況下，使用者可能需要在表格中直接進行編輯以便快速修改數據，而不必轉到其他頁面或使用外部工具進行修改。因此，實現線上表格編輯功能非常有用。在本文中，我將介紹如何使用JavaScript和一些開源程式庫實現表格資料的線上編輯。

1. HTML表格建立

在開始使用JavaScript之前，請先建立一個HTML表格。以下是一個簡單的範例：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>1.99</td>
      <td>100</td>
    </tr>
    <tr>
      <td>橙子</td>
      <td>0.99</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

2. 新增編輯按鈕和事件處理程序

在表格的每個可編輯儲存格中新增「編輯」按鈕，並在點擊按鈕時啟動編輯模式。以下是如何實現：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="editable-cell">
          <span class="value">苹果</span>
          <input type="text" class="editor" value="苹果">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">1.99</span>
          <input type="text" class="editor" value="1.99">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">100</span>
          <input type="number" class="editor" value="100">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="editable-cell">
          <span class="value">橙子</span>
          <input type="text" class="editor" value="橙子">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">0.99</span>
          <input type="text" class="editor" value="0.99">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">50</span>
          <input type="number" class="editor" value="50">
          <button class="edit-btn">编辑</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

在以下範例中，我將使用jQuery庫來尋找並處理DOM元素：

$(document).ready(function() {
  // 查找所有编辑按钮和可编辑单元格
  var editBtns = $('.edit-btn');
  var cells = $('.editable-cell');

  // 添加事件处理程序
  editBtns.click(function() {
    var cell = $(this).closest('.editable-cell');
    var valueSpan = cell.find('.value');
    var editor = cell.find('.editor');

    // 切换编辑模式
    valueSpan.hide();
    editor.show().focus();

    // 提交修改
    editor.blur(function() {
      valueSpan.text(editor.val());
      editor.hide();
      valueSpan.show();
    });
  });
});

這段程式碼首先尋找所有「編輯」按鈕和可編輯單元格，並在按鈕上啟動點選處理程序。在處理程序中，它會尋找所需的元素（值的文字節點、編輯器和儲存格），切換編輯模式，並將焦點設定在編輯器上。當使用者完成編輯並且編輯器失去焦點時，處理程序將提交修改，將更新後的值顯示在文字節點中。

3. 新增儲存和取消按鈕

在編輯模式中，使用者需要有一個方法來儲存或取消修改。我們可以新增兩個按鈕來完成這個操作：

<button class="save-btn">保存</button>
<button class="cancel-btn">取消</button>

請注意，這些按鈕應該包含在每個可編輯儲存格的編輯模式下，以便使用者可以在需要時儲存或取消單一儲存格的修改。以下是如何實現：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="editable-cell">
          <span class="value">苹果</span>
          <input type="text" class="editor" value="苹果">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">1.99</span>
          <input type="text" class="editor" value="1.99">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">100</span>
          <input type="number" class="editor" value="100">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="editable-cell">
          <span class="value">橙子</span>
          <input type="text" class="editor" value="橙子">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">0.99</span>
          <input type="text" class="editor" value="0.99">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
      <td>
        <div class="editable-cell">
          <span class="value">50</span>
          <input type="number" class="editor" value="50">
          <button class="edit-btn">编辑</button>
          <button class="save-btn">保存</button>
          <button class="cancel-btn">取消</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

與「編輯」按鈕類似，我們需要新增事件處理程序來處理這兩個按鈕的點擊事件，並向伺服器提交表格資料。以下是如何實現：

$(document).ready(function() {
  // 查找所有编辑按钮、保存按钮和取消按钮
  var editBtns = $('.edit-btn');
  var saveBtns = $('.save-btn');
  var cancelBtns = $('.cancel-btn');

  // 添加事件处理程序
  editBtns.click(function() {
    var cell = $(this).closest('.editable-cell');
    var valueSpan = cell.find('.value');
    var editor = cell.find('.editor');
    var saveBtn = cell.find('.save-btn');
    var cancelBtn = cell.find('.cancel-btn');

    // 切换编辑模式
    valueSpan.hide();
    editor.show().focus();
    saveBtn.show();
    cancelBtn.show();

    // 提交修改
    saveBtn.click(function() {
      valueSpan.text(editor.val());
      editor.hide();
      valueSpan.show();
      saveBtn.hide();
      cancelBtn.hide();

      // 向服务器提交表格数据
      var rowData = {
        name: cell.closest('tr').find('td').eq(0).text(),
        price: cell.closest('tr').find('td').eq(1).text(),
        stock: cell.closest('tr').find('td').eq(2).text()
      };
      $.ajax({
        url: '/api/updateRow',
        method: 'POST',
        data: rowData,
        success: function(response) {
          console.log('行更新成功');
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    });

    // 取消修改
    cancelBtn.click(function() {
      editor.val(valueSpan.text());
      editor.hide();
      valueSpan.show();
      saveBtn.hide();
      cancelBtn.hide();
    });
  });
});

這段程式碼首先尋找所有「編輯」按鈕、儲存按鈕和取消按鈕，並在每個「編輯」按鈕的點擊處理程序中新增事件監聽器。在處理程序中，它會尋找所需的元素（值的文字節點、編輯器、儲存按鈕和取消按鈕），顯示編輯模式，並將焦點設定在編輯器上。當使用者點擊儲存按鈕時，處理程序將提交修改，將更新後的值顯示在文字節點中，並向伺服器發送更新請求。當使用者按一下取消按鈕時，處理程序將取消修改並還原初始值。

4. 結論

在這篇文章中，我們了解如何使用JavaScript和一些開源程式庫實作表格資料的線上編輯。我們新增了「編輯」按鈕和儲存按鈕/取消按鈕，使用戶可以輕鬆地在表格中修改數據，並使用jQuery和Ajax向伺服器提交更新。這是一個很好的例子來展示JavaScript以及如何透過使用它的函式庫來改善網頁應用程式的使用者體驗。

以上是使用JavaScript實現表格資料的線上編輯的詳細內容。更多資訊請關注PHP中文網其他相關文章！