在現代網路應用程式中，表格是一個常見的UI元件，用於展示和編輯資料。在某些情況下，使用者可能需要在表格中直接進行編輯以便快速修改數據，而不必轉到其他頁面或使用外部工具進行修改。因此，實現線上表格編輯功能非常有用。在本文中，我將介紹如何使用JavaScript和一些開源程式庫實現表格資料的線上編輯。
在開始使用JavaScript之前，請先建立一個HTML表格。以下是一個簡單的範例：
| 名称 | 价格 | 库存 |
|---|---|---|
| 苹果 | 1.99 | 100 |
| 橙子 | 0.99 | 50 |
在表格的每個可編輯儲存格中新增「編輯」按鈕，並在點擊按鈕時啟動編輯模式。以下是如何實現：
| 名称 | 价格 | 库存 |
|---|---|---|
| 苹果 | 1.99 | 100 |
| 橙子 | 0.99 | 50 |
在以下範例中，我將使用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(); }); }); });
這段程式碼首先尋找所有「編輯」按鈕和可編輯單元格，並在按鈕上啟動點選處理程序。在處理程序中，它會尋找所需的元素（值的文字節點、編輯器和儲存格），切換編輯模式，並將焦點設定在編輯器上。當使用者完成編輯並且編輯器失去焦點時，處理程序將提交修改，將更新後的值顯示在文字節點中。
在編輯模式中，使用者需要有一個方法來儲存或取消修改。我們可以新增兩個按鈕來完成這個操作：
請注意，這些按鈕應該包含在每個可編輯儲存格的編輯模式下，以便使用者可以在需要時儲存或取消單一儲存格的修改。以下是如何實現：
| 名称 | 价格 | 库存 |
|---|---|---|
| 苹果 | 1.99 | 100 |
| 橙子 | 0.99 | 50 |
與「編輯」按鈕類似，我們需要新增事件處理程序來處理這兩個按鈕的點擊事件，並向伺服器提交表格資料。以下是如何實現：
$(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(); }); }); });
這段程式碼首先尋找所有「編輯」按鈕、儲存按鈕和取消按鈕，並在每個「編輯」按鈕的點擊處理程序中新增事件監聽器。在處理程序中，它會尋找所需的元素（值的文字節點、編輯器、儲存按鈕和取消按鈕），顯示編輯模式，並將焦點設定在編輯器上。當使用者點擊儲存按鈕時，處理程序將提交修改，將更新後的值顯示在文字節點中，並向伺服器發送更新請求。當使用者按一下取消按鈕時，處理程序將取消修改並還原初始值。
在這篇文章中，我們了解如何使用JavaScript和一些開源程式庫實作表格資料的線上編輯。我們新增了「編輯」按鈕和儲存按鈕/取消按鈕，使用戶可以輕鬆地在表格中修改數據，並使用jQuery和Ajax向伺服器提交更新。這是一個很好的例子來展示JavaScript以及如何透過使用它的函式庫來改善網頁應用程式的使用者體驗。
以上是使用JavaScript實現表格資料的線上編輯的詳細內容。更多資訊請關注PHP中文網其他相關文章！
