应优先使用 hidden 属性隐藏 ，语义清晰、保留数据且不影响表单提交；若仅传值不编辑，改用 ；避免 display: none，因其破坏表单行为和无障碍支持。

textarea 是表单控件，不是表格原生单元格元素。如果你在 里嵌了 ，想“隐藏它”，得先分清目标：是隐藏整个单元格？还是只隐藏这个可编辑区域但保留数据？还是让它不可见但还能提交？不同目的，解法完全不同。

用 hidden 属性隐藏 textarea 元素本身

直接给 加 hidden 属性是最干净的语义化隐藏方式——不占空间、不聚焦、不读屏、仍保留在 DOM 中，value 值也还在，JS 可随时读写。

示例：

<td>
  <textarea name="note" hidden>草稿内容</textarea>
</td>

注意：hidden 对 有效，但它不会影响父 的布局；如果想连 一起藏掉，得另外给 也加 hidden。

常见失效原因：

• CSS 里写了 textarea { display: block !important; } —— 必须加兜底规则：[hidden] { display: none !important; }
• 之前用过 el.style.display = 'none'，后来设 el.hidden = false 却没恢复：记得清掉内联样式，el.style.display = '' 再设 hidden = false

用 type="hidden" 替代 textarea（仅当不需要编辑）

如果这个字段只是传值、用户根本不用改，就别用 了。换成 更轻量、更安全、更符合语义。

示例：

<td>
  <input type="hidden" name="note" value="草稿内容">
</td>

关键点：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• type 必须小写 "hidden"，不能写成 "HIDDEN" 或 "hide"
• name 不可省略，否则表单提交时后端收不到
• 别用 style="display:none" 包裹普通 来“假装”隐藏——它仍可被 DevTools 修改、触发事件、被自动化工具操作

隐藏 td 单元格，连带里面的 textarea 一起消失

如果目标是让整列或某一行的编辑区不可见（比如权限控制下收起备注列），应该操作 或 ，而不是只动里面的 。

推荐写法：

<td hidden>
  <textarea name="note">草稿内容</textarea>
</td>

优势：

• hidden 具有继承性：父 会让内部所有子元素（包括 ）自动不可见、不可聚焦
• 比给每个子元素单独加 hidden 更简洁，且避免遗漏
• 恢复显示只需移除 上的 hidden，无需逐个处理子元素

  注意：若该 所在行用了 colspan，隐藏后浏览器会重新计算列对齐，可能导致视觉错位——这种场景建议提前规避 colspan，或改用 JS 动态重绘逻辑。

  不要用 display: none 控制 textarea 的显隐

  虽然 style="display:none" 能让 消失，但它会破坏表单行为：

  • 设置 display: none 后，该 不会出现在 FormData 中，也不会被 form.elements 收录
  • 即使你用 JS 临时设回 display: block，它的 focus 状态、滚动位置、光标位置全丢失
  • 与 hidden 属性相比，它没有语义，无障碍支持差，且容易被 CSS 规则意外覆盖

  唯一能接受 display: none 的情况，是你明确知道这个 纯属占位、从不参与提交，且后续也不需要 JS 交互——但这种需求极少。

  最易被忽略的一点： 在 里时，它的默认垂直对齐（vertical-align: middle）和 resize 行为可能干扰表格高度。隐藏前最好确认是否已清除这些副作用，否则显示/隐藏切换时会出现意外的行高跳变。

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