如何使用JavaScript的querySelector实现表格行编辑功能？

安全阿岳

2026-10-11

问题原因

document.querySelectorAll("table > tbody > tr") 获取的是所有tr组成的节点集合，不是你要编辑的某一行，给集合设置innerHTML不会生效
模板字符串里的HTML标签被转义成了<、"这类实体字符，浏览器会把它们解析成普通文本，不会渲染成输入框
没有用到传入的index参数定位指定编辑行，默认值"x"是字符串，也无法作为索引取到对应元素

修正后代码

const editRow = (index) => {
  // 拿到所有行后通过传入的数字索引取到目标编辑行
  const trList = document.querySelectorAll("table > tbody > tr");
  // 这里增加索引合法性判断，避免报错
  if (index < 0 || index >= trList.length) return
  const targetTr = trList[index];
  // 直接写原生HTML标签，不要用转义后的实体字符
  const newRow = `
    <tr>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="text" name="umur" />
      </td>
      <td>
        <input type="text" name="address" />
      </td>
      <td colspan = 2>
        <span class="btn btn-info" onClick="saveData()">Save</span>
      </td>
    </tr>`;
  targetTr.innerHTML = newRow;
};