JS实现表格单元格编辑失焦保存输入值失效如何修复

需要实现表格单元格编辑效果：点击编辑按钮后单元格替换为输入框，输入完成点击外部区域失焦时输入框自动消失，新输入的值替换原有旧值，页面刷新重载前效果持续有效。当前代码存在bug：失焦后输入框不会消失，始终停留在编辑状态，无法完成值的替换保存。

失焦后输入框无法消失的核心原因如下：

• 取值逻辑错误：blur回调中尝试从td元素上读取data-target属性，但该属性是写在动态生成的input标签上的，td本身没有这个属性，拿到的目标id为undefined，无法选中对应单元格执行内容替换，输入框自然不会被移除
• 原值被错误清空：原代码判断单元格内容不为空时直接把输入框默认值设为空字符串，导致编辑时原有内容丢失
• 事件重复绑定：每次点击编辑都会给页面所有input绑定新的blur事件，多次点击后事件会重复触发，导致逻辑混乱
• 动态生成的input标签value属性没有加引号包裹，输入内容包含空格时会出现属性解析错误

• 移除错误清空原值的逻辑，编辑时默认把单元格原有内容填入输入框
• 只给当前动态生成的输入框绑定事件，绑定前先解绑同元素之前绑定的blur事件，避免重复触发
• 直接从input标签上读取data-target属性，定位要更新的目标单元格
• 给input标签的value属性加上引号，避免特殊字符、空格导致的渲染异常
• blur触发时直接把输入框的值写回对应td，自动替换掉input元素，实现输入框消失的效果
• 如果需要刷新页面后内容也不丢失，可以加localStorage本地存储逻辑

JS逻辑 #

function edit_description() {
  var targetDescription = $("#description-1");
  // 读取单元格原有值，不要清空
  var originValue = targetDescription.text().trim();

  // 生成输入框，value属性加引号，写入目标单元格id
  targetDescription.html(`<input class="description form-control" data-target="description-1" type="text" value="${originValue}">`);

  // 绑定事件：先聚焦输入框，解绑旧事件避免重复触发，再绑定blur逻辑
  targetDescription.find("input.description")
    .focus()
    .off('blur')
    .on('blur', function() {
      const inputVal = $(this).val().trim();
      const targetId = $(this).data('target');
      // 将输入值写回单元格，自动替换输入框
      $(`#${targetId}`).text(inputVal);
      // 调用保存逻辑
      save_description(targetId, inputVal);
    });
};

function save_description(identification, description) {
  console.log('Saved!', identification, description);
  // 如需刷新页面保留内容，解开下面注释即可
  // localStorage.setItem(identification, description);
  var userInput = {
    "identification": identification,
    "description": description
  };
};

// 页面加载时自动读取本地存储内容，可选功能
// $(function() {
//   const savedDesc = localStorage.getItem('description-1');
//   if(savedDesc) {
//     $('#description-1').text(savedDesc);
//   }
// })

CSS样式 #

a[role="button"][onclick] {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table-wrapper">
  <table id="table" class="table table-striped">
    <thead>
      <tr>
        <th scope="col"><span>Edit</span></th>
        <th scope="col"><span>Description</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="edit-1"><a class="btn" role="button" onclick="edit_description();">Edit ></a></td>
        <td id="description-1">Lorem</td>
      </tr>
    </tbody>
  </table>
</div>

内容的提问来源于stack exchange，提问作者Swantewit