前端求助：点击按钮新增表格行及为输入框绑定菜单显示功能

1. 点击按钮动态新增<tr>和<td> #

不用给新增元素加重复ID，核心思路是创建元素时用类名标识，同时通过事件委托处理后续交互。

具体实现代码：

// 拿到添加按钮和表格的tbody容器
const addRowBtn = document.getElementById('add-row-btn');
const tableBody = document.querySelector('#your-table tbody');

addRowBtn.addEventListener('click', () => {
  // 创建新行和单元格
  const newTr = document.createElement('tr');
  const newTd = document.createElement('td');
  
  // 单元格里放输入框和对应的菜单，用类名代替ID
  newTd.innerHTML = `
    <input type="text" class="input-item" placeholder="输入内容">
    <div class="menu-item" style="display: none;">
      <span>选项1</span>
      <span>选项2</span>
    </div>
  `;
  
  newTr.appendChild(newTd);
  tableBody.appendChild(newTr);
});

2. 输入框点击触发对应菜单的显示/隐藏 #

不用ID关联输入框和菜单，而是利用DOM元素的相邻关系（比如输入框的下一个兄弟元素就是菜单），再配合事件委托处理动态新增的输入框：

// 给整个文档绑定点击事件，处理所有输入框（包括新增的）
document.addEventListener('click', (e) => {
  // 判断点击的是输入框
  if (e.target.classList.contains('input-item')) {
    const currentMenu = e.target.nextElementSibling;
    // 切换显示状态
    currentMenu.style.display = currentMenu.style.display === 'none' ? 'block' : 'none';
    
    // 可选：点击页面其他地方关闭菜单
    setTimeout(() => {
      document.addEventListener('click', (event) => {
        if (!e.target.contains(event.target) && !currentMenu.contains(event.target)) {
          currentMenu.style.display = 'none';
        }
      }, { once: true });
    }, 0);
  }
});

重点提醒 #

• 绝对不要重复使用ID，页面上每个ID必须唯一，重复会导致JS获取元素时只返回第一个匹配项，逻辑完全混乱。
• 动态生成的元素不能直接绑定事件，必须用事件委托（把事件绑定在父元素或document上），这样新增的元素也能触发事件。
• 用类名标记同类型元素，用DOM相对位置关联配对元素（比如输入框和它的菜单），这种方式比用ID灵活得多，特别适合动态内容场景。

内容的提问来源于stack exchange，提问作者Ahmed Saif