如何将按钮添加、删除和编辑到我的表格？

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td id="row1-id">1</td>
    <td id="row1-name">John</td>
    <td>
      <button id="edit-btn1">Edit</button>
      <button id="delete-btn1">Delete</button>
    </td>
  </tr>
  <!-- 添加更多行 -->
</table>

button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

// 获取按钮和表格中的元素
const editBtn1 = document.getElementById('edit-btn1');
const deleteBtn1 = document.getElementById('delete-btn1');
const row1Id = document.getElementById('row1-id');
const row1Name = document.getElementById('row1-name');

// 编辑按钮点击事件
editBtn1.addEventListener('click', () => {
  const newName = prompt('Enter a new name:');
  if (newName) {
    row1Name.textContent = newName;
  }
});

// 删除按钮点击事件
deleteBtn1.addEventListener('click', () => {
  const confirmDelete = confirm('Are you sure you want to delete this row?');
  if (confirmDelete) {
    row1Id.parentNode.parentNode.remove();
  }
});