批量插入textarea需逐个创建并设置name、rows、cols，用CSS控制宽高，td加overflow:visible，固定列宽防拉伸，iOS需兜底scrollHeight，保存前blur()同步值，数据提取只认value，表格须置于form内或显式关联form属性。
直接在 <td> 里塞多个 <code><textarea></textarea> 不难，但批量添加后立刻面临编辑态管理、尺寸自适应、数据提取三座大山。不加控制地插入，轻则布局崩坏，重则保存时拿不到最新输入值。
怎么批量插入 <textarea></textarea> 到表格单元格
不能用 innerHTML += '<textarea></textarea>' 拼接，会清空已有事件和焦点；也不能对整列 td 统一设 contenteditable——它不触发 change，也不支持 rows/cols 约束。
- 逐个遍历目标
td，用document.createElement('textarea')创建新实例 - 显式设置
name（如name="row-0-col-2"），方便后端识别位置 - 设
rows="3"和cols="30"作基础尺寸，再用 CSS 覆盖（如width: 100%; min-height: 48px;） - 插入后调用
td.replaceChild(textarea, td.firstChild)或td.textContent = ''再td.appendChild(textarea)，避免残留文本干扰
<textarea></textarea> 在表格里撑高失效的常见原因
监听 input 事件重设 height 是标准做法，但在表格中容易失灵，根本原因是父级约束太强。
-
td默认overflow: hidden，撑高后内容被裁剪——必须加style="overflow: visible;"或改用position: relative - 表格自动计算列宽，
textarea宽度设为100%后，内容变多会拉宽整列——建议固定列宽（table-layout: fixed+td { width: 200px; }） - iOS Safari 旧版
scrollHeight返回值偏小，需加兜底：el.style.height = Math.max(el.scrollHeight, 48) + 'px'; - 不要依赖
resize事件——它只响应手动拖拽，不响应内容变化
批量保存前如何正确读取所有 <textarea></textarea> 值
遍历 document.querySelectorAll('td textarea') 看似合理，但若用户刚输完还没失焦，value 是对的；可一旦你用 textContent 或 innerText 取 td，就只能拿到初始空值或上一次提交的老数据。
立即学习“前端免费学习笔记（深入）”；
- 保存前务必先执行 commit 步骤：对每个
textarea触发一次blur()，强制浏览器同步状态（部分浏览器需配合dispatchEvent(new Event('change', { bubbles: true }))） - 提取数据时，只认
textarea.value，别 fallback 到td.textContent——后者在插入textarea后已为空 - 二维数组生成推荐写法：
Array.from(table.querySelectorAll('tbody tr')).map(row => Array.from(row.cells).map(cell => cell.querySelector('textarea')?.value || '')) - 提交前用
JSON.stringify(data, null, 2)打印一眼，确认结构是否符合后端要求的行列顺序
最易被忽略的一点：表格里放 <textarea></textarea> 本质是把表单控件嵌进非表单容器。如果整个表格不在 <form></form> 标签内，或没用 form 属性显式关联，提交时这些值根本不会随表单一起发出——哪怕 DOM 上看着好好的。
