如何使用JavaScript在表格新单元格中插入输入框？

原代码存在的问题 #

• 未定义id变量，导致document.getElementById(id)无法获取目标表格，直接报错
• 直接执行newDesc = input只是变量赋值，并没有将输入框元素添加到单元格的DOM结构中

修正后的实现方案 #

方案1：创建新的输入框插入单元格

// 替换为你的表格实际ID
const table = document.getElementById("targetTable");
const indexRows = table.rows.length;

// 插入新行
let newRow = table.insertRow(-1);
let newIDCell = newRow.insertCell(0);
let newDescCell = newRow.insertCell(1);
let newCell1 = newRow.insertCell(2);

// 设置ID单元格内容
newIDCell.textContent = indexRows + 1;

// 创建新输入框并配置属性
const input = document.createElement("input");
input.className = "option";
input.type = "text"; // 可根据需求设置类型，比如number、select等
input.placeholder = "请输入内容";

// 将输入框添加到目标单元格
newDescCell.appendChild(input);

方案2：复用已有的.option输入框（原位置输入框会被移动）

const input = document.querySelector('.option');
// 先判断是否获取到输入框
if (!input) {
  console.error("未找到类名为.option的输入框");
  return;
}

// 替换为你的表格实际ID
const table = document.getElementById("targetTable");
const indexRows = table.rows.length;

// 插入新行并创建单元格
let newRow = table.insertRow(-1);
let newIDCell = newRow.insertCell(0);
let newDescCell = newRow.insertCell(1);
let newCell1 = newRow.insertCell(2);

newIDCell.textContent = indexRows + 1;
// 将已有输入框添加到新单元格
newDescCell.appendChild(input);

关键说明 #

• 必须确保目标表格的ID正确，否则无法定位到表格元素
• 向单元格添加DOM元素要使用appendChild()方法，而不是直接变量赋值
• 若需要自定义输入框样式或功能，可通过input.setAttribute()添加更多属性（比如name、value等）

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