如何让多个同功能按钮正常工作？附HTML/JS问题代码

开发者阿泽

2026-9-2

问题原因

你的代码存在4个核心问题，导致新增表格的提交按钮功能异常：

违反HTML id唯一性规则：所有新增表格、输入框、按钮都复用了初始表格的id="list"、id="w"、id="m"、id="p"，document.getElementById()只会返回页面中第一个匹配id的元素，所以无论点击哪个表格的提交按钮，都会读取第一个表格的输入值、往第一个表格插入行。
事件绑定时机不对：给.button_boi按钮绑定点击事件的循环只在页面初始加载时执行一次，后续动态新增的表格里的提交按钮没有被绑定事件，点击自然无响应。
冗余错误代码：最后一段绑定.deletethismaybe点击事件的代码存在语法错误，getElementsByClassName不需要在类名前加.，而且你已经用事件委托实现了表格删除功能，这段代码完全多余还会触发报错。
HTML结构不合法：直接把<div class="boxy_gril">放在<tr>标签内部，<tr>的合法子元素只有<td>/<th>，非法嵌套会导致DOM元素查找逻辑异常。

修复方法

用事件委托统一处理所有提交按钮的点击逻辑，点击时只查找当前按钮所属表格内部的输入框和表尾，不需要提前循环绑定事件，自动适配后续动态新增的表格；同时移除所有重复id，修正HTML嵌套结构。

修复后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="WELPPproto.css">
</head>
<body>
<h1 style="font-family:verdana">Word List</h1>
<table class="list">
  <tr>
    <th scope="col">Word</th>
    <th scope="col">English</th>
    <th scope="col">Pronunciation</th>
    <th scope="col"><button class="deletethismaybe" type="button" title="delete this table">X</button></th>
  </tr>
  <tfoot>
    <tr>
      <td><input type="text" class="w" required /></td>
      <td><input type="text" class="m" required /></td>
      <td><input type="text" class="p" /></td>
    </tr>
    <tr>
      <td colspan="3"><div class="button_boi"><button type="button" class="add-btn">Enter</button></div></td>
    </tr>
  </tfoot>
</table>
<div id="ntable" class="ntable" >
  <section>
    
  </section>
</div>
  <br>
  <br>
  <button class="button_gril" id="addtable">Add Table</button>
<script>
document.getElementById("addtable").onclick = function() {
  let puttable = document.getElementById("ntable");
  let section = puttable.querySelector('section');

  let tableHTML = '<br><br>' + '<table class="list">' + '<tr>' +
    '<th scope="col">' + 'Word' + '</th>' +
    '<th scope="col">' + 'English' + '</th>' +
    '<th scope="col">' + 'Pronunciation' + '</th>' + '<th><button class="deletethismaybe" type="button" title="delete this table">X</button></th>' + 
    '</tr>' +
    '<tfoot><tr>' + 
    '<td><input type="text" class="w" required /></td>'+
    '<td><input type="text" class="m" required /></td>' + 
    '<td><input type="text" class="p" /></td>' + 
    '</tr>' + '<tr>' + '<td colspan="3">' + '<div class="button_boi">' + '<button type="button" class="add-btn">Enter</button>' + '</div>' + '</td>'+ '</tr>' + '</tfoot>' + '</table>';
    
   section.insertAdjacentHTML('beforebegin', tableHTML);
  
}

// 统一用事件委托处理所有点击逻辑，不用单独绑定
document.addEventListener('click', (e) => {
  // 删除表格逻辑
  let delTableBtn = e.target.closest('.deletethismaybe');
  if (delTableBtn) {
    e.preventDefault();
    delTableBtn.closest('table').remove();
    return;
  }

  // 删除行逻辑
  let delRowBtn = e.target.closest('.deletethis');
  if (delRowBtn) {
    e.preventDefault();
    delRowBtn.closest('tr').remove();
    return;
  }

  // 提交新增行逻辑
  let addBtn = e.target.closest('.add-btn');
  if (addBtn) {
    e.preventDefault();
    // 只找当前按钮所属的表格
    const currentTable = addBtn.closest('table');
    const tfoot = currentTable.querySelector('tfoot');
    // 只拿当前表格里的输入值
    const wordValue = currentTable.querySelector('.w').value;
    const engValue = currentTable.querySelector('.m').value;
    const pronunValue = currentTable.querySelector('.p').value;

    const trHTML = '<tr>' +
      '<td>' + wordValue + '</td>' +
      '<td>' + engValue + '</td>' +
      '<td>' + pronunValue + '</td>' + '<td><button class="deletethis" type="button" title="delete this row">X</button></td>' +
    '</tr>';
    
    tfoot.insertAdjacentHTML('beforebegin', trHTML);
    // 提交后清空输入框
    currentTable.querySelector('.w').value = '';
    currentTable.querySelector('.m').value = '';
    currentTable.querySelector('.p').value = '';
  }
})
</script>
</body>
</html>

修复后无论新增多少个表格，每个表格的提交按钮都会只给自身添加行，删除按钮也能正常工作。

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