js实现单击可修改表格

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

1. 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>

1. 绑定事件

然后需要使用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()函数。

1. 实现编辑功能

编写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;
  };
}

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

1. 完整代码

接下来是完整的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;
  };
}

1. 示例说明

假设我们有一个表格，其中包含三个单元格，我们可以通过上面的代码来实现对单元格的文本内容进行编辑。下面是两个示例说明：

示例一：

初始状态：

姓名	年龄	性别
张三	20	男
李四	25	女

点击“李四”的“年龄”单元格后，单元格变为可编辑的文本框，已有的内容为“25”，如下图所示：

姓名	年龄	性别
张三	20	男
李四	25	女

输入新的年龄“30”，并按回车键或将焦点移出文本框，单元格变为“30”，如下图所示：

姓名	年龄	性别
张三	20	男
李四	30	女

示例二：

初始状态：

姓名	年龄	性别
张三	20	男
李四	25	女

点击“张三”的“姓名”单元格后，单元格变为可编辑的文本框，已有的内容为“张三”，如下图所示：

姓名	年龄	性别
张三	20	男
李四	25	女

此时，用户可以将“张三”更改为“王五”，并按回车键或将焦点移出文本框，单元格变为“王五”，如下图所示：

姓名	年龄	性别
王五	20	男
李四	25	女

以上是对该攻略的详细讲解，希望能对你有所帮助。