一个可以增加和删除行的table并可编辑表格中内容

要实现一个可以增加和删除行的table并可编辑表格内容，我们可以采取以下步骤：

1.在HTML中创建一个可编辑的表格，并添加一个按钮用于添加新行。

2.使用JavaScript添加一个事件监听器，在添加按钮被点击时向表格中添加新行。

3.为每个单元格添加事件监听器，以便当用户在单元格中输入时进行响应。

4.使用JavaScript添加一个删除按钮，当删除按钮被点击时删除最后一行表格。

下面是一个具体的实现过程：

首先，在HTML中创建一个可编辑的表格，并且添加一个按钮用于添加新行。

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">John Doe</td>
      <td contenteditable="true">[e-mail]</td>
      <td contenteditable="true">123-456-7890</td>
    </tr>
  </tbody>
</table>

<button id="addRowBtn">Add Row</button>

在这个例子中，我们创建了一个包含表头和一个可编辑行的表格。每个单元格的contenteditable属性设置为“true”表示该单元格可以编辑。我们还创建了一个名为“addRowBtn”的按钮，用于添加新行。

接下来，我们需要使用JavaScript添加一个事件监听器，以便在添加按钮被点击时向表格中添加新行。

document.getElementById("addRowBtn").addEventListener("click", function() {
  var table = document.getElementById("myTable");
  var row = table.insertRow();
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.contentEditable = true;
  cell2.contentEditable = true;
  cell3.contentEditable = true;
});

在这个例子中，我们使用addEventListener()函数将事件监听器绑定到“addRowBtn”按钮上。当按钮被点击时，JavaScript将获取表格对象，并在表格中插入一个新行。然后，我们在新行中插入三个单元格，并将每个单元格的contentEditable属性设置为“true”，以使其可编辑。

接下来，我们为每个单元格添加事件监听器，以便当用户在单元格中输入时进行响应。

var cells = document.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("input", function() {
    console.log("Cell value has been changed to: " + this.innerText);
  });
}

在这个例子中，我们使用getElementsByTagName()函数获取所有单元格对象，并使用一个循环为每个单元格添加一个事件监听器。当单元格中的内容发生变化时，该代码将记录新值。

最后，我们使用JavaScript添加一个删除按钮，当删除按钮被点击时删除最后一行表格。

var deleteBtn = document.createElement("button");
deleteBtn.innerText = "Delete Last Row";
deleteBtn.addEventListener("click", function() {
  var table = document.getElementById("myTable");
  var rowCount = table.rows.length;
  if (rowCount > 1) { // Only delete if there's more than one row
    table.deleteRow(rowCount - 1);
  }
});
document.body.appendChild(deleteBtn);

在这个例子中，我们使用createElement()函数创建了一个名为“deleteBtn”的新按钮，并为其指定一个文本标签。然后，我们使用addEventListener()函数将一个事件监听器绑定到该按钮上。当按钮被点击时，JavaScript将获取表格对象，并删除最后一行。请注意，该代码检查表格是否至少有两行，以避免尝试将表格完全删除。

这就是如何创建一个可以增加和删除行的可编辑表格的完整攻略。下面是两个示例：

1.在这个示例中，我们创建了一个名为“Emails”的表格，并使用JavaScript动态添加了三行。每个单元格都可以编辑，并且当单元格值发生变化时，JavaScript将记录新值。

2.对于第二个示例，我们创建了一个名为“Tasks”的表格，并添加一个按钮来添加新行。当用户单击Add Row按钮时，JavaScript将动态添加一个新行。这个表格还包括一个名为“Delete Last Row”的按钮，当用户单击该按钮时，JavaScript将删除表格中的最后一行。

<!-- Example 1: Emails Table -->
<h2>Emails</h2>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">John Doe</td>
      <td contenteditable="true">[e-mail]</td>
    </tr>
    <tr>
      <td contenteditable="true">Jane Smith</td>
      <td contenteditable="true">[e-mail]</td>
    </tr>
    <tr>
      <td contenteditable="true">Bob Johnson</td>
      <td contenteditable="true">[e-mail]</td>
    </tr>
  </tbody>
</table>

<script>
  // Add event listener to all cells in table
  var cells = document.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener("input", function() {
      console.log("Cell value has been changed to: " + this.innerText);
    });
  }
</script>

<!-- Example 2: Tasks Table -->
<h2>Tasks</h2>
<table id="taskTable">
  <thead>
    <tr>
      <th>Task Name</th>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">Clean the kitchen</td>
      <td contenteditable="true">High</td>
    </tr>
  </tbody>
</table>

<button id="addRowBtn">Add Row</button>
<button id="deleteRowBtn">Delete Last Row</button>

<script>
  // Add event listener to Add Row button
  var addRowBtn = document.getElementById("addRowBtn");
  addRowBtn.addEventListener("click", function() {
    var table = document.getElementById("taskTable");
    var row = table.insertRow();
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.contentEditable = true;
    cell2.contentEditable = true;
  });

  // Add event listener to Delete Last Row button
  var deleteRowBtn = document.getElementById("deleteRowBtn");
  deleteRowBtn.addEventListener("click", function() {
    var table = document.getElementById("taskTable");
    var rowCount = table.rows.length;
    if (rowCount > 1) { // Only delete if there's more than one row
      table.deleteRow(rowCount - 1);
    }
  });
</script>