attr()函数不能直接在单元格中显示自定义属性，必须先用attr()读取属性值，再用text()或html()显式插入；data-*是唯一推荐的自定义属性写法，且需注意attr()与data()在值更新机制上的差异。
attr() 函数不能直接在单元格里“显示”自定义属性
jQuery 的 attr() 是读写 DOM 属性的工具，它本身不负责渲染或插入内容。想让单元格“显示”某个自定义属性（比如 data-id 或 custom-flag），必须显式把属性值取出来、再用 text() 或 html() 插入到单元格里。
正确做法：先用 attr() 读取，再用 text() 或 html() 写入
常见错误是写成 $('td').attr('data-role', 'admin') 就以为单元格会自动显示 “admin”——其实这只是设置了属性，没触发任何显示逻辑。
- 要显示属性值，得组合调用：
$('td').text($(this).attr('data-role')) - 如果属性值含 HTML（如
data-desc="<em>test</em>"），且你希望解析渲染，才用html()；否则一律优先用text()防 XSS - 注意上下文：在事件回调或循环中，
this指向当前 DOM 元素，才能正确绑定属性读取
data-* 属性是唯一推荐的自定义属性写法
HTML5 明确只允许 data- 开头的自定义属性。浏览器兼容性好，jQuery 的 attr() 和 data() 都能读取，但行为有差异：
-
attr('data-id')读取的是初始 HTML 中写的值，后续用 JS 改过也不会更新（除非手动重设） -
data('id')读取的是 jQuery 内部缓存的值，会响应后续.data('id', ...)的修改 - 如果只是静态展示，用
attr('data-xxx')更直接；如果属性值会动态变化且需状态管理，考虑data()
避免把 attr() 当作模板语法用
有人试图在 HTML 里写 <td><script>$(this).attr('data-name')</script></td>，这完全无效——JS 不会在标签内自动执行，更不会插入到文本流中。
- 所有属性读取和内容注入，必须在 DOM 加载完成后，通过 JS 脚本统一处理
- 批量操作时，建议用
$('table td').each(...)遍历，比反复查 selector 效率高 - 若表格由后端渲染，更简单的方式是在服务端就把属性值直接写进单元格内容里，免去前端额外 JS 处理
真正容易被忽略的是：自定义属性本身不可见，它的值不会自动出现在页面上——这个前提没意识到，后面所有 attr() 调用都会跑偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
