如何将带下拉菜单的按钮放在具有数据库数据的表上

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>
        <button class="dropdown-btn">Options</button>
        <div class="dropdown-content">
          <!-- 下拉菜单选项将在此处动态生成 -->
        </div>
      </td>
    </tr>
    <!-- 其他行的数据 -->
  </tbody>
</table>

// 获取下拉菜单按钮和下拉菜单内容的元素
const dropdownBtns = document.querySelectorAll('.dropdown-btn');
const dropdownContents = document.querySelectorAll('.dropdown-content');

// 为每个下拉菜单按钮添加点击事件
dropdownBtns.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    // 切换下拉菜单内容的显示状态
    dropdownContents[index].classList.toggle('show');
  });
});

// 获取下拉菜单选项的数据（假设从后端获取）
const optionsData = ['Option 1', 'Option 2', 'Option 3'];

// 动态生成下拉菜单选项
dropdownContents.forEach((content) => {
  optionsData.forEach((option) => {
    const optionElement = document.createElement('div');
    optionElement.textContent = option;
    content.appendChild(optionElement);
  });
});

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content.show {
  display: block;
}