JS新手求助：如何制作可编辑动态表格的编辑按钮？需replace标签示例

实现思路 #

通过JavaScript的replace()方法结合DOM操作，切换表格单元格的文本/编辑状态，无需使用for循环遍历单元格，适合新手理解上手。

完整代码示例 #

HTML结构 #

<table id="editableTable" border="1">
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>前端开发</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>后端开发</td>
  </tr>
</table>
<button id="saveBtn">保存修改</button>

JavaScript逻辑 #

// 点击单元格进入编辑状态
document.getElementById('editableTable').addEventListener('click', function(e) {
  if (e.target.tagName === 'TD') {
    const originalText = e.target.textContent.trim();
    // 用replace替换文本为可编辑输入框
    e.target.innerHTML = e.target.innerHTML.replace(originalText, `<input type="text" value="${originalText}" class="editInput">`);
    // 自动聚焦输入框
    e.target.querySelector('.editInput').focus();
  }
});

// 输入框失焦时保存内容
document.getElementById('editableTable').addEventListener('blur', function(e) {
  if (e.target.classList.contains('editInput')) {
    const td = e.target.parentElement;
    const newText = e.target.value.trim();
    // 用replace替换输入框为新文本
    td.innerHTML = td.innerHTML.replace(e.target.outerHTML, newText);
  }
}, true);

// 批量保存所有未确认的修改
document.getElementById('saveBtn').addEventListener('click', function() {
  const inputs = document.querySelectorAll('.editInput');
  inputs.forEach(input => {
    const td = input.parentElement;
    const newText = input.value.trim();
    td.innerHTML = td.innerHTML.replace(input.outerHTML, newText);
  });
  alert('修改已保存');
});

核心要点 #

• 点击单元格时，replace()方法将单元格内的原始文本替换为带初始值的输入框，快速切换到编辑模式。
• 输入框失焦后，再次调用replace()将输入框元素替换为用户输入的新文本，完成内容更新。
• 批量保存按钮针对所有未失焦的输入框做统一替换，避免遗漏未确认的修改。

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