HTML表格元数据应挂载在<table>标签上用data-属性，禁用<input type="hidden">塞入表格内部；需带业务前缀命名、手动类型转换，提交时须置于<form>内标准隐藏输入框。
用 table 的 data- 属性存元数据，别塞进 tbody 里
HTML 表格本身不支持“隐藏字段”概念，<input type="hidden"> 不能直接放在 <table> 内部（它不是表单控件的合法子元素）。真正可行的做法是把元数据挂载在 <table> 标签自身上，用标准的 data- 属性。
常见错误是把 <input type="hidden"> 塞进 <tr> 或 <td> —— 浏览器会容错渲染，但语义混乱、JS 查询易出错、无障碍检测可能报 warning。
-
data-source="sales-q2-2026"、data-refresh-timestamp="1722700800"这类属性可直接写在<table>开始标签里 - JavaScript 读取时用
tableEl.dataset.source，写入用tableEl.dataset.refreshTimestamp = Date.now().toString() - 避免用
data-id这种泛化命名，优先带业务前缀，如data-report-id、data-api-version - 值含空格或特殊字符时，浏览器自动转义，JS 读取时无需额外解码；但若值本身是 JSON 字符串，建议先
JSON.stringify()再赋值，否则解析易失败
需要屏幕阅读器感知？用 aria-hidden="false" + visually-hidden CSS 类
如果元数据要被辅助技术读取（比如表格对应图表的数据源说明），就不能靠 data- 属性——它默认不被屏幕阅读器暴露。此时应另起一个 <table>，视觉隐藏但保留可访问性。
关键不是“怎么藏”，而是“怎么让机器读到但人看不见”。hidden 属性或 aria-hidden="true" 都会彻底屏蔽，必须反着来。
立即学习“前端免费学习笔记（深入）”；
- 给隐藏表格加
class="visually-hidden"，CSS 定义为position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; - 必须同时设
aria-hidden="false"（显式关闭屏蔽），否则屏幕阅读器跳过 - 在主图表或主表格上用
aria-describedby="data-table-2026"指向该隐藏表的id，且 ID 必须完全匹配（大小写、连字符都不能错） - 动态插入时，先 append
<table>，再设置aria-describedby，否则初始状态不生效
后端需要提交元数据？别放表格里，改用表单级 input type="hidden"
表格本身不参与提交，只有表单控件才会上报。如果你最终要把元数据随请求发给后端，<table> 上的 data- 属性或隐藏表格都无效——它们不会出现在 Form Data 里。
唯一可靠路径是：确保表格所在页面有包裹它的 <form>，然后在该 <form> 内部、任意位置（推荐放在 <table> 后面）添加标准隐藏输入域。
-
<input type="hidden" name="report_type" value="monthly">——name必须与后端约定一致 - 不能漏写
name，否则字段不出现在 Network → Form Data 中 - 不能把
<input>放在<form>外，哪怕 DOM 看起来“挨着”也不行 - JS 动态赋值时，绑定
form.addEventListener('submit', ...)，而不是页面加载就写死，防止用户操作后值过期
为什么不用 display: none 包裹普通 input？兼容性和语义风险
有人图省事，写 <div style="display:none"><input name="meta"></div>，这看似能隐藏，但问题不少：
- 某些表单序列化库（如 jQuery.serialize()）可能忽略 display:none 下的控件，导致字段丢失
- 无障碍检测工具会报出“隐藏表单控件未提供替代文本”，因为
display:none不等于语义隐藏 - 万一 CSS 加载失败或被禁用，这个 input 会意外显示出来，破坏 UI
-
input type="hidden"是原生语义：浏览器明确知道“不渲染，但提交”，兼容性从 IE6 到 Chrome 127 都稳定
真正要警惕的不是“怎么藏”，而是藏完之后字段是否仍被正确识别、提交、读取——每个环节都有明确的 DOM 位置、属性约束和运行时依赖，漏掉任何一环，数据就断在半路。
