HTML表格 点击按钮增加一行，增加一行的单元不再被选中，就会将其设置为不可编辑状态

可以通过以下步骤实现：

1. 在 HTML 表格中，为“增加行”按钮添加一个点击事件处理程序。
2. 在事件处理程序中，使用 JavaScript 创建一个新行并将其添加到表格中。
3. 获取新行中的所有单元格，并将它们设置为不可编辑状态。

以下是一些示例代码，演示如何实现这一功能：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">John Doe</td>
      <td contenteditable="true">30</td>
      <td><button onclick="addRow()">Add Row</button></td>
    </tr>
  </tbody>
</table>

JavaScript 代码：

function addRow() {
  // 获取表格和表体元素
  const table = document.getElementById("myTable");
  const tbody = table.querySelector("tbody");

  // 创建新行和单元格
  const row = document.createElement("tr");
  const nameCell = document.createElement("td");
  const ageCell = document.createElement("td");
  const actionsCell = document.createElement("td");

  // 将单元格添加到新行
  row.appendChild(nameCell);
  row.appendChild(ageCell);
  row.appendChild(actionsCell);

  // 向表体添加新行
  tbody.appendChild(row);

  // 设置新行单元格的内容和属性
  nameCell.contentEditable = true;
  ageCell.contentEditable = true;
  actionsCell.innerHTML = '<button onclick="addRow()">Add Row</button>';

  // 获取新行中的所有单元格，并将它们设置为不可编辑状态
  const cells = row.querySelectorAll("td");
  cells.forEach(cell => {
    cell.addEventListener("click", () => {
      cell.contentEditable = false;
    });
  });
}

在这个示例代码中，我们首先获取了表格和表体元素，并创建了一个新的行和单元格。然后，我们将单元格添加到新行中，并将新行添加到表体中。接下来，我们设置新行单元格的内容和属性，并为新行中的所有单元格添加了一个点击事件处理程序。在单元格被点击时，我们将其设置为不可编辑状态，以防止用户意外地编辑已经添加的行。