如何利用HTML表格制作简单的抽奖界面：固定行列布局逻辑

抽奖界面必须用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 一刀切。