【JQuery 】表格td双击可编辑

要实现表格的 td 双击可编辑功能，你可以使用 jQuery 监听 dblclick 事件，并在事件处理函数中创建一个输入框来接收用户的输入。以下是一个简单的实现示例：

HTML 部分：

<table id="editableTable">
  <tr>
    <td>第一行，第一列</td>
    <td>第一行，第二列</td>
  </tr>
  <tr>
    <td>第二行，第一列</td>
    <td>第二行，第二列</td>
  </tr>
</table>

jQuery 和 JavaScript 部分：

$(document).ready(function() {
  $('#editableTable td').on('dblclick', function() {
    var originalContent = $(this).text();
    $(this).html('<input type="text" class="editInput" value="' + originalContent + '" />');
    $(this).find('.editInput').focus().select();
 
    // 保存编辑后的值
    $(this).find('.editInput').blur(function() {
      var editedContent = $(this).val();
      $(this).parent().html(editedContent);
    });
  });
});

在这个示例中，当 td 被双击时，它的内容会被一个文本输入框替换，用户可以在文本框中输入新的内容。当文本框失去焦点 (blur 事件) 时，表格单元格的内容会被更新为新输入的值。