如何实现按下回车键时为表格单元格添加Checkbox？

你的代码存在几个问题导致功能异常，比如重复添加复选框、DOM操作错误，下面是修正后的实现方案：

原代码的问题点 #

• 每次回车都会遍历所有行的单元格重复插入复选框，导致同一个单元格出现多个复选框
• 代码中rows.cells[j]是错误写法，应该是row.cells[j]（当前循环的行对象）
• table.appendChild(row)是多余操作，insertRow(-1)已经自动将新行添加到表格末尾
• 依赖全局event对象不够严谨，建议将事件作为参数传入函数

修正后的完整代码 #

<html>
<head></head>
<body>
  Search: <input onkeyup="myFunction(event)" type="search" id="mySearch" value="">
  <p>按下回车键将搜索内容添加为表格行，并附带复选框</p>
  <p id="demo"></p> 
  <table id="table" border="1">
    <tr>
      <td></td>
    </tr>
  </table>

  <script>
    function myFunction(event) {
      // 监听回车键
      if (event.keyCode === 13) {
        const searchInput = document.getElementById("mySearch");
        const inputValue = searchInput.value.trim();
        
        // 空值不处理
        if (!inputValue) return;

        const table = document.getElementById("table");
        // 插入新行到表格末尾
        const row = table.insertRow(-1);
        // 插入单元格
        const cell = row.insertCell(0);
        
        // 设置单元格内容为搜索值
        cell.textContent = inputValue;
        
        // 创建复选框并添加到单元格
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        cell.appendChild(checkbox);
        
        // 清空搜索框
        searchInput.value = "";
      }
    }
  </script>
</body>
</html>

关键改进说明 #

• 只给新添加的单元格插入复选框，避免遍历所有行重复添加
• 将event作为参数传入函数，避免依赖全局对象
• 增加了空值判断，避免添加空内容的行
• 添加了表格边框（border="1"）方便查看效果
• 回车后自动清空搜索框，提升操作体验

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