html data-* 属性是字符串容器而非绑定机制；按钮获取行数据需用 event.target.closest() 定位、json 数据须转义并 try/catch 解析、动态插入行要事件委托、类型转换必须手动处理。
HTML 没有 data 属性表格数据绑定这回事——data-* 是字符串容器，不是绑定机制；表格里想让按钮带行数据，关键不是“绑在哪”，而是“怎么读、何时读、读错了怎么办”。
为什么表格里 button.dataset.id 总是 undefined
点击的是图标或 span，event.target 并不是你写的 button，所以直接读 event.target.dataset.id 肯定为空。
- 必须用
event.target.closest('[data-id]')向上找最近的带data-id的元素 - 如果按钮里嵌了
<svg></svg>或<i></i>，不加closest就永远拿不到 - 别在事件回调里反复调
closest：高频操作（如滚动中批量渲染）应提前缓存目标元素引用
data-row='{"id":123,"name":"张三"}' 为什么 JSON.parse 报错
因为 HTML 解析时会把属性值里的双引号、换行、多余空格当字面量处理，导致字符串不合法。
- 服务端或模板里输出 JSON 前，必须
JSON.stringify()且转义双引号：data-row='{"id":123}' - JS 读取后要
try/catch：try { JSON.parse(btn.dataset.row) } catch (e) { console.warn('invalid data-row', e) } - 更轻量的做法：只存关键字段，比如
data-id="123" data-name="张三"，避免序列化开销和解析风险
动态插入的表格行，data-* 绑定失效怎么办
用 innerHTML = '...' 或 insertAdjacentHTML 插入新行后，所有事件监听器丢失，dataset 值虽在，但没人响应它。
- 插入后必须立即绑定事件：
row.querySelector('[data-action]').addEventListener(...) - 更推荐事件委托：给
tbody绑一次click，再用event.target.closest('tr')定位行，closest('[data-id]')定位按钮 - 禁用状态别靠
disabled属性——表格按钮常需样式反馈，应加class="disabled"配合 CSS 控制视觉与交互
data-* 和 value/checked 写混了，表单提交就出错
data-id 是元信息，value 才是提交值；改了 data-id 不影响表单内容，但误把业务逻辑写进 value 就会污染后端接收字段。
- 下拉选项要同时存语义值和计算值？用
<option value="Verbal Warning" data-points="1"></option>，读select.value提交，读selectedOption.dataset.points计算 - 复选框状态必须用
el.checked判断，el.dataset.checked是静态快照，用户点完它不会变 -
innerHTML =重写整行会清空当前input.value，哪怕它有data-id——DOM 重建后，输入框恢复初始value，用户刚输的内容全丢
真正容易被忽略的是：dataset 值永远是字符串，"1" 不等于 1，"true" 不等于 true；而表格交互往往需要数字计算或布尔判断——类型转换这一步，没人替你做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
