在表格行中添加备注应优先使用语义明确的data-*属性（如data-item-sku），值建议JSON编码；避免用hidden input除非属表单提交场景；所有客户端备注均不可信，须服务端校验。
表格行里怎么塞备注而不影响渲染
直接往 <tr> 或 <td> 上加 data-* 属性是最轻量、最安全的做法。浏览器不渲染它，无障碍检测不报错，JS 也能立刻读取。
-
data-属性必须全小写，用短横线分隔，比如data-order-id="123"、data-status="pending" - 不要用
data-note这种模糊名，优先用语义明确的键，如data-item-sku、data-row-timestamp - 值建议 JSON 编码字符串（如
data-meta='{"source":"import","batch":42}'），避免嵌入引号或换行导致解析失败 - 别在
<table>标签上堆太多data-，会影响 DOM 查询性能；按需挂到具体行或单元格即可
为什么不用 <input type="hidden"> 塞进表格单元格
可以塞，但多数时候是错的——<input type="hidden"> 是表单控件，只在 <form> 内提交时生效。如果表格本身不参与表单提交，这个隐藏域就纯属冗余 DOM 节点，还可能被某些 JS 表格库误识别为可编辑字段。
- 只有当该表格属于某个
<form>，且你明确需要随表单一起提交这行备注时，才用<input type="hidden" name="row_note" value="..."> - 若同一行要存多个备注字段，别写多个同名
name的 hidden —— 后端收到的是数组，容易和真实业务字段混淆 - 千万别把
<input type="hidden">放在<tr>外面又用form="xxx"关联，IE 和部分移动端 WebView 对这种跨结构关联支持不稳定
JavaScript 读取备注时容易踩的坑
用 dataset API 读取 data- 属性最稳妥，但要注意命名映射规则和空值处理。
-
data-user-id→ JS 中是el.dataset.userId（自动转驼峰，不是el.dataset.user-id） -
data-active="false"读出来是字符串"false"，不是布尔值，需手动转换：JSON.parse(el.dataset.active)或el.dataset.active === "true" - 用
querySelectorAll("tr[data-order-id]")可以快速筛选带备注的行，但别写成tr[data-order-id=""]—— 空字符串值不会匹配，得用属性存在判断 - 动态插入的行，如果 JS 在插入后没重置
dataset，旧值会残留；建议每次更新都显式赋值：row.dataset.timestamp = Date.now().toString()
备注信息要不要加密或校验
完全不用。无论是 data- 还是 <input type="hidden">，所有客户端侧存储的备注都可视同明文——用户打开开发者工具就能看到、改掉。真正需要保护的数据（如权限标识、金额）必须由服务端生成、签名，并在接收时严格验证。
立即学习“前端免费学习笔记（深入）”；
-
data-适合存：前端筛选条件、日志追踪 ID、UI 状态标记（如data-expanded="true"） -
<input type="hidden">适合存：CSRF token、步骤序号、非敏感上下文 ID（如cart_id） - 哪怕只是“备注”，只要涉及业务逻辑判断（比如
data-can-delete="0"），后端也必须重新查权限，不能信前端传来的这个值
表格里的备注本质是辅助信息，不是数据源。谁控制渲染逻辑，谁就该负责备注的生成与解释——别指望靠一个 hidden 字段或 data 属性绕过服务端校验。
