js实现单击可修改表格

下面提供一份js实现单击可修改表格的攻略，包含以下几个步骤：

HTML结构

首先需要在HTML中定义一个表格，如下示例：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

绑定事件

然后需要使用JavaScript代码来获取表格的单元格，并绑定鼠标单击事件，如下所示：

var table = document.getElementById("myTable");

for (var i = 0; i < table.rows.length; i++) {
  for (var j = 0; j < table.rows[i].cells.length; j++) {
    table.rows[i].cells[j].onclick = function () {
      editCell(this);
    };
  }
}

这段代码将通过循环遍历表格的所有单元格，为每一个单元格设置onclick事件，并将事件处理程序设置为editCell()函数。

实现编辑功能

编写editCell()函数，用于单击单元格时，将单元格的文本内容替换为一个可编辑的文本框，并将文本框的焦点设置为选中状态，以方便用户进行编辑。示例代码如下：

function editCell(cell) {
  var oldValue = cell.innerHTML.trim();

  // 创建一个可编辑的文本框
  var input = document.createElement("input");
  input.type = "text";
  input.value = oldValue;

  // 将文本框插入到单元格中
  cell.innerHTML = "";
  cell.appendChild(input);

  // 选中文本框
  input.focus();
  input.select();

  // 绑定失去焦点事件
  input.onblur = function () {
    var newValue = this.value.trim();
    cell.innerHTML = newValue || oldValue;
  };
}

补充一下，上述代码还设置了文本框的失去焦点事件，意思是在用户编辑完文本框后，离开文本框时自动将文本框的内容赋值给单元格，并将焦点返回给单元格。

完整代码

接下来是完整的JavaScript代码，它实现了上述三个步骤的功能：

var table = document.getElementById("myTable");

for (var i = 0; i < table.rows.length; i++) {
  for (var j = 0; j < table.rows[i].cells.length; j++) {
    table.rows[i].cells[j].onclick = function () {
      editCell(this);
    };
  }
}

function editCell(cell) {
  var oldValue = cell.innerHTML.trim();

  // 创建一个可编辑的文本框
  var input = document.createElement("input");
  input.type = "text";
  input.value = oldValue;

  // 将文本框插入到单元格中
  cell.innerHTML = "";
  cell.appendChild(input);

  // 选中文本框
  input.focus();
  input.select();

  // 绑定失去焦点事件
  input.onblur = function () {
    var newValue = this.value.trim();
    cell.innerHTML = newValue || oldValue;
  };
}