原生结构最适合抽奖界面，因其行列坐标稳定、dom定位精准且渲染可靠；应使用结构，统一border-collapse:collapse，显式设置宽高，用class控制状态，事件委托绑定并取rowindex/cellindex计算坐标，移动端优先touchstart加防抖。
表格结构必须用 <table> + <code><tr> + <code><td>，不能靠 <code>div 模拟
HTML 表格的语义和渲染行为决定了它天然适合网格化抽奖布局——浏览器会自动对齐行列、撑开等宽单元格，而 div + display: grid 或 float 容易在动态高亮或动画时错位。抽奖界面的核心是「固定行列坐标」，比如第 2 行第 3 列永远对应奖品 ID prize_23，这只有原生 <table> 能靠 DOM 位置稳定映射。
<p>实操建议：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>用 <code><table> 包裹，每行用 <code><tr>，每个格子用 <code><td>，不要嵌套 <code><div> 或 <code><span></span> 做内容容器（除非必要样式隔离）
border-collapse: separate，统一设为 border-collapse: collapse，避免单元格间隙干扰视觉焦点<td> 必须有明确 <code>width 和 height（推荐用 px 或 vw/vh），避免内容撑大导致行列偏移
<td> 绑定事件，别套一层 <code><button></button>——否则 event.target 可能指向按钮而非格子，坐标计算失准
td 的高亮与禁用状态必须用 class 切换，不能靠 disabled 属性
<td> 没有 <code>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> 的 <code>overflow: hidden截断 - 避免用
:hover做主交互反馈——手机端不触发，且抽奖过程需要明确的“已选中”状态，不是悬停态 - 事件监听绑定在
<table> 上（委托），而不是每个 <code><td> 单独绑——减少内存占用，且新增格子自动生效 <li>回调里直接取 <code>e.target.cellIndex和e.target.parentElement.rowIndex，别依赖dataset - 注意：如果
<td> 跨行（<code>rowspan）或跨列（colspan），cellIndex仍是其**起始列索引**，不是视觉中心列；如需视觉中心，得额外算，但抽奖一般不用跨格 - 行号从 0 开始，第一行是
rowIndex === 0，别手动 +1 后再比对配置数组——保持一致才不易错 - 监听
touchstart，但只对<td> 元素调用 <code>e.preventDefault()，其他区域（如标题栏）保留滚动能力 - 加防抖：同一格子 500ms 内重复触发只执行一次，避免手滑连点
- 兼容写法：用
if ('ontouchstart' in window) { ...touchstart... } else { ...click... }，别用第三方库检测 - 测试重点：在 iPhone Safari 和 Chrome for Android 上分别验证，微信内嵌 WebView 对
touchstart支持更严格，有时需加cursor: pointer才激活触摸
行列坐标计算别硬写索引，用 rowIndex 和 cellIndex
很多人手写循环给每个 <td> 加 <code>data-row="2" data-col="3"，结果一删行就全乱。HTML 表格 DOM 自带定位属性，event.target.cellIndex 和 event.target.parentElement.rowIndex 是实时准确的。
使用场景：点击格子后，你要知道这是第几行第几列，才能查配置表、播放对应音效、更新中奖名单。
实操建议：
移动端真机上 touchstart 替代 click，但别忽略 preventDefault 冲突
安卓/iOS 点击表格格子常有 300ms 延迟或误触发双击缩放，直接用 click 在真机上反应慢。但盲目换 touchstart 又容易导致页面无法滚动——因为 touchstart 默认会阻止默认行为。
性能影响：未处理的 touchstart 会让整个页面变卡，尤其格子多时。
实操建议：
行列固定这事看着简单，真正上线后出问题的几乎全是坐标映射错位或移动端响应延迟——不是表格不会画，是没把 DOM 层级和事件路径理清楚。
