抽奖界面必须用table+tr+td实现真实表格结构，确保rowindex/cellindex可读；每个td需设data-index或data-row/data-col标识，禁用时用pointer-events:none+遮罩层，中奖高亮用class切换而非内联样式。
表格结构必须用 table + tr + td，不能靠 CSS Grid 伪装
HTML 表格抽奖界面的核心是「视觉网格」与「逻辑索引」对齐，不是看起来像格子就行。用 div + display: grid 做出来的“表格”无法被 JS 精确按行列定位，后续随机选中、高亮、禁用等操作会出错。
正确做法：用原生 table，每行用 tr，每个奖品格子用 td，确保 DOM 层级反映二维坐标（rowIndex 和 cellIndex 可直接读取）。
- 避免嵌套
div在td里再塞内容——除非只做装饰，否则会干扰td的点击区域和事件绑定 - 不要合并单元格（
colspan/rowspan），抽奖格子必须一一对应独立td，否则Math.floor(Math.random() * totalCells)算出的索引会落空或重复 - 固定行列数建议写死：比如 4×4 就写 4 个
tr，每个含 4 个td；动态生成也行，但必须保证最终 DOM 是规整矩形
给每个 td 绑定唯一标识，别依赖 innerText 或 class 名
抽奖时要记录“抽中了哪个”，靠 td.innerText === "一等奖" 匹配极不可靠——文本可能重复、带空格、被翻译或后期改文案。class 名如 prize-1 也不保险，容易误删或冲突。
可靠方式：用自定义属性 data-index 或 data-row+data-col，初始化时就写死：
<td data-row="0" data-col="0" data-index="0">谢谢参与</td> <td data-row="0" data-col="1" data-index="1">再来一次</td>
-
data-index适合一维遍历（table.querySelectorAll('td')后直接用[i]取） -
data-row和data-col适合二维逻辑（比如禁止相邻格子连续中奖、高亮整行等） - 千万别用
id——大量td会导致 ID 重复风险，且 JS 查询比data-属性慢
点击触发抽奖时，禁用所有 td 并加 loading 状态
用户手速快、网络延迟、JS 执行慢都可能导致多次点击，结果抽中多个奖。最简方案不是靠防抖函数，而是 DOM 层面即时锁定：
- 点击后立刻遍历所有
td，设disabled属性（注意：td不支持disabled，得用pointer-events: none+ 添加 class 如disabled） - 同时给当前按钮或整个表格加半透明遮罩层（用一个绝对定位
div覆盖），防止视觉上还能点 - 中奖后恢复前，务必重置所有
td的样式（包括背景色、边框、opacity），否则下次抽奖视觉状态错乱
常见错误：只禁用按钮，不锁 td；或者用 setTimeout 模拟抽奖动画但没清定时器，导致多次回调叠加。
中奖高亮要区分「当前中奖格子」和「历史中奖记录」
如果只是单次抽奖，高亮一个 td 就够了；但很多需求要保留历史（比如“已抽中：3 个二等奖”），这时不能只改 background-color，否则颜色叠加难分辨。
- 推荐用 class 切换：
td.current-win（动效+边框闪） +td.history-win（浅灰底+小图标） - 避免用内联 style 修改
backgroundColor——不利于主题切换和 CSS 覆盖 - 如果中奖格子需要弹窗展示详情，务必把
data-属性传过去，而不是从 DOM 里重新 query，防止异步时节点已被移除或替换
真正麻烦的是多轮抽奖后格子状态混合：比如某个 td 既是本轮中奖，又是历史中过奖。这时候 class 列表管理比单纯 toggle 更稳妥，别偷懒用 classList.toggle 一刀切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
