点击按钮时应通过e.target.closest('tr')定位当前行，再用row.querySelectorAll('textarea')读取本行文本域值；disabled需临时移除才能读值，readonly不影响el.value；name属性用于键名构建数据对象；动态插入行须避免innerHTML覆盖导致内容丢失。

点击按钮时读取所在行所有 的值

直接用 querySelectorAll('textarea') 会拿到整页所有文本域，不是当前行。必须从触发事件的按钮出发，向上找 ，再查其内部的 。

常见错误现象：点第5行的“保存”按钮，结果读到第1行 的内容，因为用了 document.querySelector('.note') 这种全局查找。

• 给按钮加 class="save-row"，不要依赖 id（避免重复）
• 用 e.target.closest('tr') 安全定位当前行，兼容嵌套结构
• 在该 内执行 row.querySelectorAll('textarea')，只读本行
• 遍历结果时用 el.value，不是 el.textContent 或 el.innerHTML

值为空但实际有内容？检查是否被 readonly 或 disabled

value 属性在 disabled 状态下始终返回空字符串，readonly 不影响读取。很多人误以为“只读=不能读”，其实只是不能编辑。

使用场景：表格行进入“查看模式”后，用户仍需导出该行原始填写内容。

• 用 el.hasAttribute('disabled') 判断是否禁用；若为 true，需临时移除再读值（注意之后恢复）
• readonly 不影响 el.value，可直接读
• 如果用了 contenteditable="true" 替代 ，则必须用 el.innerText，且要 trim 换行符

批量读取多列 并按列名组织数据

当一行含多个文本域（如“备注”“说明”“反馈”），仅靠 value 数组难对应字段。建议用 name 属性做键名。


htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载

性能影响：遍历 row.querySelectorAll('textarea[name]') 比全量查快，浏览器能跳过无 name 的节点。

• 每个 必须设 name="remark"、name="desc" 等有意义的值
• 代码中用 Object.fromEntries(Array.from(textareas).map(el => [el.name, el.value])) 构建对象
• 若某列没填，el.value 是空字符串，不是 undefined，别用 el.value || null 判空

动态插入的行里 读不到值？检查 DOM 插入方式

用 innerHTML += '...' 或 aditional.innerHTML = newHTML 会销毁原有节点，导致已输入内容丢失——这不是读取失败，是值根本没存住。

容易踩的坑：模板行复制后，新 的 name 或 id 重复，后续用 getElementById 只拿到第一个。

• 新增行必须用 insertAdjacentHTML('beforeend', htmlStr) 或 cloneNode(true)，保留原节点状态
• 克隆后立即重置 name 和 id（如加时间戳或序号），避免表单提交冲突
• 若用 cloneNode(true)，记得手动调用 el.focus() 或重置 value，否则可能残留旧值

真实项目里最常被忽略的是：** 的换行符在不同系统下表现不一致，.value 返回的是标准化的 \n，但粘贴进来的可能含 \r\n。如果要做服务端校验长度，得先 .replace(/\r\n/g, '\n') 统一处理。**

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！