本文详解如何使用原生 JavaScript 动态向 HTML 表格末尾添加新行，并在每行的单元格中嵌入可编辑的 <input type="text"> 元素，适用于姓名录入、表单扩展等场景。
本文详解如何使用原生 javascript 动态向 html 表格末尾添加新行，并在每行的单元格中嵌入可编辑的 `` 元素，适用于姓名录入、表单扩展等场景。
在构建交互式数据录入界面时，常需支持用户动态添加表格行——尤其当每行需包含可编辑的文本输入框（如“姓名”“邮箱”等字段）时，不能仅用 innerHTML 简单赋值，而应通过 DOM 方法安全创建并插入表单控件。
核心要点在于：避免直接设置 cell.innerHTML = '<input>'（易引发 XSS 风险且不利于后续事件绑定），推荐使用 document.createElement() 创建 input 元素，再通过 appendChild() 插入单元格。
以下为优化后的 addRow() 函数实现：
function addRow() {
const table = document.querySelector('#table');
const row = table.insertRow(-1); // -1 表示插入到表格末尾（最后一行之后）
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const input1 = document.createElement('input');
input1.type = 'text';
input1.placeholder = 'First Name';
input1.className = 'form-input'; // 可配合 CSS 统一控制样式
cell1.appendChild(input1);
const input2 = document.createElement('input');
input2.type = 'text';
input2.placeholder = 'Last Name';
input2.className = 'form-input';
cell2.appendChild(input2);
}✅ 关键说明：
立即学习“前端免费学习笔记（深入）”；
- insertRow(-1) 是标准写法，确保新行始终追加至表格底部（比 insertRow(2) 更健壮，不受当前行数变化影响）；
- 使用 createElement + appendChild 保证元素被正确解析为 DOM 节点，支持后续获取 .value、绑定 input 或 blur 事件；
- 为输入框添加 placeholder 和 className，便于用户体验与样式维护；
- 建议为 input 添加 required 或 autocomplete="off" 等属性，按实际业务增强可用性。
配套 CSS 推荐（兼容性更强，移除冗余声明）：
input.form-input {
width: 100%;
height: 4rem;
font-size: 18pt;
font-weight: 500;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;
border: none;
background: transparent;
outline: none;
}
/* 确保单元格撑开高度 */
td {
vertical-align: middle;
padding: 0;
}⚠️ 注意事项：
- 不要将 <input> 直接写入 cell.innerHTML（如 cell1.innerHTML = '<input type="text">'），这会导致元素无法被 querySelector 正确捕获，且难以统一管理事件；
- 若需初始化默认值，可通过 input1.value = 'John' 设置，而非 input1.setAttribute('value', ...)（后者仅影响初始渲染）；
- 如需删除某行，可为每行添加「删除」按钮，并绑定 row.remove() 方法；
- 在真实项目中，建议封装为可复用函数，支持传入列数、占位符数组等参数，提升扩展性。
通过以上方式，你即可构建一个灵活、安全、可维护的动态表格输入系统——无论是学生名单、联系人管理，还是问卷收集，都能轻松扩展。
