利用js制作信息表格，完成编辑，保存，取消，删除等功能

在JavaScript中制作信息表格并提供编辑、保存、取消和删除功能，通常会结合HTML、CSS以及前端框架如React或Vue。以下是一个简化的步骤说明：

1. **HTML结构**：
- 创建一个`<table>`元素作为主体，包含`<tr>`（行）和`<td>`（单元格），用于显示数据。
- 使用`<input>`标签作为单元格的编辑区域。

<table id="infoTable">
  <thead>
    <tr>
      <!-- 表头列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
  </tbody>
</table>

2. **添加事件监听**：
- 对于每个单元格，添加`ondblclick`事件处理程序，当用户双击时打开编辑模式。
- 对于表单按钮（比如“保存”、“取消”和“删除”），添加点击事件。

document.querySelectorAll('td').forEach(td => {
  td.addEventListener('dblclick', () => startEditing(td));
});

3. **编辑状态管理**：
- 使用变量或状态管理工具（如Redux）来跟踪当前处于编辑状态的单元格及其内容。

4. **函数实现**：
- `startEditing`函数：清空编辑输入框并聚焦到相应单元格。
- `saveChanges`函数：获取编辑输入的内容，更新数据库或表格数据，并关闭编辑模式。
- `cancelEdit`函数：清除编辑输入，恢复原内容，关闭编辑模式。
- `deleteRow`函数：删除选中的行或通过ID。

5. **提交/确认提示**：
- 提示用户确认操作（例如，保存前弹出确认对话框）。

6. **AJAX请求**：
- 如果涉及到服务器交互，可以使用fetch或axios等库来发送异步请求。

function saveChanges() {
  const editedValue = document.getElementById('editInput').value;
  // 发送POST请求到服务器...
}