原生<table>结构最适合抽奖界面，因其行列坐标稳定、DOM定位精准且渲染可靠；应使用<table><tr><td>结构，统一border-collapse:collapse，显式设置宽高，用class控制状态，事件委托绑定并取rowIndex/cellIndex计算坐标，移动端优先touchstart加防抖。
表格结构必须用 <table> + <tr> + <td>，不能靠 div 模拟
HTML 表格的语义和渲染行为决定了它天然适合网格化抽奖布局——浏览器会自动对齐行列、撑开等宽单元格，而 div + display: grid 或 float 容易在动态高亮或动画时错位。抽奖界面的核心是「固定行列坐标」，比如第 2 行第 3 列永远对应奖品 ID prize_23，这只有原生 <table> 能靠 DOM 位置稳定映射。
实操建议：
- 用
<table>包裹，每行用<tr>，每个格子用<td>，不要嵌套<div>或<span>做内容容器（除非必要样式隔离） - 禁用
border-collapse: separate，统一设为border-collapse: collapse，避免单元格间隙干扰视觉焦点 - 所有
<td>必须有明确width和height（推荐用px或vw/vh），避免内容撑大导致行列偏移 - 若需点击响应，直接给
<td>绑定事件，别套一层<button>——否则event.target可能指向按钮而非格子，坐标计算失准
td 的高亮与禁用状态必须用 class 切换，不能靠 disabled 属性
<td> 没有 disabled 属性，强行加了也无效。抽奖过程中常需临时禁用已抽中格子或锁定当前滚动区域，必须靠 CSS class 控制交互与样式。
常见错误现象：点击后格子没变灰、再次点击仍触发逻辑、高亮边框错位。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 定义两个 class：
.active（当前中奖格子，加box-shadow和背景色）、.disabled（已抽中/不可点，加opacity: 0.6+pointer-events: none） - 禁用时只加
.disabled，不要同时移除onclick——DOM 事件监听器还在，但pointer-events: none已拦截 - 高亮用
.active，但要确保它的z-index足够高（至少 10），否则可能被父级<table>的overflow: hidden截断 - 避免用
:hover做主交互反馈——手机端不触发，且抽奖过程需要明确的“已选中”状态，不是悬停态
行列坐标计算别硬写索引，用 rowIndex 和 cellIndex
很多人手写循环给每个 <td> 加 data-row="2" data-col="3"，结果一删行就全乱。HTML 表格 DOM 自带定位属性，event.target.cellIndex 和 event.target.parentElement.rowIndex 是实时准确的。
使用场景：点击格子后，你要知道这是第几行第几列，才能查配置表、播放对应音效、更新中奖名单。
实操建议：
- 事件监听绑定在
<table>上（委托），而不是每个<td>单独绑——减少内存占用，且新增格子自动生效 - 回调里直接取
e.target.cellIndex和e.target.parentElement.rowIndex，别依赖dataset - 注意：如果
<td>跨行（rowspan）或跨列（colspan），cellIndex仍是其**起始列索引**，不是视觉中心列；如需视觉中心，得额外算，但抽奖一般不用跨格 - 行号从 0 开始，第一行是
rowIndex === 0，别手动 +1 后再比对配置数组——保持一致才不易错
移动端真机上 touchstart 替代 click，但别忽略 preventDefault 冲突
安卓/iOS 点击表格格子常有 300ms 延迟或误触发双击缩放，直接用 click 在真机上反应慢。但盲目换 touchstart 又容易导致页面无法滚动——因为 touchstart 默认会阻止默认行为。
性能影响：未处理的 touchstart 会让整个页面变卡，尤其格子多时。
实操建议：
- 监听
touchstart，但只对<td>元素调用e.preventDefault()，其他区域（如标题栏）保留滚动能力 - 加防抖：同一格子 500ms 内重复触发只执行一次，避免手滑连点
- 兼容写法：用
if ('ontouchstart' in window) { ...touchstart... } else { ...click... }，别用第三方库检测 - 测试重点：在 iPhone Safari 和 Chrome for Android 上分别验证，微信内嵌 WebView 对
touchstart支持更严格，有时需加cursor: pointer才激活触摸
行列固定这事看着简单，真正上线后出问题的几乎全是坐标映射错位或移动端响应延迟——不是表格不会画，是没把 DOM 层级和事件路径理清楚。
