如何用纯JavaScript实现点击编辑按钮使表格行内Input可编辑

核心实现思路 #

点击表格行内的「edit」链接时，定位到当前表格行，遍历该行内所有带有readonly属性的<input>元素，移除其readonly属性使其变为可编辑状态。

完整代码实现 #

假设你的表格结构类似如下：

<table id="data-table">
  <tr>
    <td><input type="text" value="数据1" readonly></td>
    <td><input type="text" value="数据2" readonly></td>
    <td><a href="#" class="edit-link">edit</a></td>
  </tr>
  <tr>
    <td><input type="text" value="数据3" readonly></td>
    <td><input type="text" value="数据4" readonly></td>
    <td><a href="#" class="edit-link">edit</a></td>
  </tr>
</table>

对应的纯JavaScript代码：

// 采用事件委托绑定点击事件，兼容动态生成的表格行
document.getElementById('data-table').addEventListener('click', function(e) {
  // 确认点击的是edit链接
  if (e.target.classList.contains('edit-link')) {
    e.preventDefault(); // 阻止链接默认跳转行为
    
    // 获取当前点击链接所在的表格行
    const targetRow = e.target.closest('tr');
    if (!targetRow) return; // 容错：找不到行则终止
    
    // 查找该行内所有带readonly属性的input
    const readonlyInputs = targetRow.querySelectorAll('input[readonly]');
    
    // 遍历移除readonly属性
    readonlyInputs.forEach(input => {
      // 两种实现方式二选一即可
      input.removeAttribute('readonly'); // 移除HTML属性
      // input.readOnly = false; // 或设置DOM属性为false（驼峰式命名）
    });
  }
});

关键细节说明 #

• 事件委托：绑定事件到表格而非单个edit链接，即使表格行是动态渲染生成的，也能正常触发事件，避免重复绑定的问题。
• closest('tr')：快速定位当前元素的最近父级表格行，比逐层调用parentNode更简洁可靠。
• 精准选择器：input[readonly]确保只选中带有readonly属性的输入框，不会影响其他可编辑的input。

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