无需使用jquery插件即可编辑的表

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td contenteditable="true">John Doe</td>
      <td contenteditable="true">25</td>
      <td>
        <button class="edit-btn">Edit</button>
        <button class="delete-btn">Delete</button>
      </td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

// 获取表格
const table = document.querySelector('table');

// 监听编辑按钮点击事件
table.addEventListener('click', function(event) {
  const target = event.target;
  
  // 编辑按钮点击
  if (target.classList.contains('edit-btn')) {
    const row = target.closest('tr');
    const cells = row.querySelectorAll('td[contenteditable="true"]');
    
    // 将可编辑的单元格设置为可编辑状态
    cells.forEach(function(cell) {
      cell.contentEditable = true;
    });
    
    // 修改按钮文本为Save
    target.textContent = 'Save';
    target.classList.remove('edit-btn');
    target.classList.add('save-btn');
  }
  
  // 保存按钮点击
  if (target.classList.contains('save-btn')) {
    const row = target.closest('tr');
    const cells = row.querySelectorAll('td[contenteditable="true"]');
    
    // 将可编辑的单元格设置为不可编辑状态
    cells.forEach(function(cell) {
      cell.contentEditable = false;
    });
    
    // 修改按钮文本为Edit
    target.textContent = 'Edit';
    target.classList.remove('save-btn');
    target.classList.add('edit-btn');
  }
  
  // 删除按钮点击
  if (target.classList.contains('delete-btn')) {
    const row = target.closest('tr');
    row.remove();
  }
});