使用JavaScript实现表格数据的在线编辑

在现代Web应用程序中，表格是一个常见的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以及如何通过使用它的库来改善Web应用程序的用户体验。

以上就是使用JavaScript实现表格数据的在线编辑的详细内容，更多请关注php中文网其它相关文章！