表格中隐藏元素应优先用tr/td/th的hidden属性，input需用type="hidden"确保提交；禁用display:none隐藏required输入框，避免校验失效；显隐控制须统一机制，避免样式冲突。
表格里直接用 hidden 属性就行，但别乱套在 input 上
想隐藏整行或某个单元格，tr、td、th 加 hidden 最快——浏览器原生支持，不占空间、不读屏、不聚焦。比如：
<tr hidden> <td>张三</td> <td>25</td> </tr>
但注意：input 这类表单控件加 hidden 属性后，提交时会被完全忽略（FormData 里没有它，form.elements 也遍历不到）。这不是 bug，是规范行为。
input 在表格里要“藏但能提交”，必须用 type="hidden"
表格中嵌入的表单字段（比如编辑行里的 ID、状态标记），不能靠 CSS 隐藏，得换语义正确的写法：
<td><input type="hidden" name="user_id" value="1001"></td>
关键点：
-
type必须小写"hidden"，写成"HIDDEN"或"hide"虽然部分浏览器容错，但不保稳 -
name不可省，没name就不会进提交数据 - 别用
style="display:none"包裹input type="text"来模拟——它仍可能被用户改值、触发事件、干扰校验
用 display: none 隐藏表格元素时，required 会失效
如果表格里有带 required 的可见 input，你临时用 style.display = "none" 把它藏起来，用户提交时浏览器大概率跳过校验，表单直接通过。这不是预期行为，而是现实限制。原因：display: none 的元素不参与交互流，校验逻辑默认绕过。应对方式：
- 真要保留校验，改用
visibility: hidden（占位但不可见） - 或者显隐切换后手动调用
element.checkValidity() - 更稳妥的做法：把校验逻辑从 DOM 属性移到 JS，用
submit事件统一拦截判断
JS 控制显隐时，别混用 style.display 和 hidden
常见翻车现场：先用 el.style.display = "none" 隐藏，再想用 el.hidden = false 恢复，结果没反应。因为内联 display: none 的优先级高于 [hidden] 的默认样式。正确姿势：
- 只用一种机制：要么全走
el.hidden = true/false，要么全走el.style.display - 如果必须切换，恢复前先清内联样式：
el.style.display = ""，再设el.hidden = false - 检查是否被第三方 CSS 强制覆盖，基础样式里加兜底：
[hidden] { display: none !important; }
最易被忽略的是：表格中 td 设了 hidden，但父 tr 又写了 style="display: table-row"——后者会直接压垮 hidden 的效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
