element table表格点击单元格实现编辑

要实现表格单元格的编辑，可以使用以下几个步骤：

1. 给表格中的每个单元格绑定点击事件。

2. 在点击事件中，创建一个 input 元素，并将其插入到当前单元格中。

3. 将当前单元格的文本内容赋值给 input 元素的 value 属性。

4. 给 input 元素绑定失焦事件，在失焦事件中将 input 元素的 value 值赋给当前单元格，并删除 input 元素。

以下是一个示例代码：

<table id="myTable">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<script>
  var table = document.getElementById("myTable");
  var cells = table.getElementsByTagName("td");

  for (var i = 0; i < cells.length; i++) {
    cells[i].onclick = function () {
      var cell = this;
      var text = cell.innerText;
      var input = document.createElement("input");
      input.type = "text";
      input.value = text;
      input.onblur = function () {
        cell.innerText = this.value;
        cell.removeChild(this);
      };
      cell.innerHTML = "";
      cell.appendChild(input);
      input.focus();
    };
  }
</script>

在上面的代码中，我们先获取了表格中的所有单元格，并给它们都绑定了点击事件。在点击事件中，我们创建了一个 input 元素，并将其插入到当前单元格中。然后，将当前单元格的文本内容赋值给 input 元素的 value 属性，使 input 元素的值与当前单元格的值一致。最后，给 input 元素绑定了失焦事件，使得当 input 元素失去焦点时，将其值赋给当前单元格，并删除 input 元素。