最简方式是在<td>上写onclick，但不推荐；推荐用事件委托：给<table>绑定click事件，用e.target.closest('td')判断并处理，兼顾动态表格与维护性。
怎么给表格单元格绑定点击事件
直接在 <td> 上写 onclick 是最简方式，但不推荐——它把逻辑和结构混在一起，后续改样式或加功能容易出错。更稳妥的做法是用 JavaScript 统一监听：给整个 <table> 绑定 click 事件，再用 event.target 判断是否点中了 <td>。
注意：必须确保目标元素是 <td>，因为点击可能落在文字、内联元素甚至空隙上。用 closest() 最可靠：
document.querySelector('table').addEventListener('click', function(e) {
const td = e.target.closest('td');
if (!td) return;
// 处理点击逻辑
});
如何切换单元格背景色而不影响其他状态
别直接操作 style.backgroundColor，否则会覆盖原有 CSS 类里的颜色、过渡动画或 !important 规则。推荐用 class 切换：
- 先在 CSS 中定义一个高亮类，比如
.selected { background-color: #cce5ff !important; } - 点击时用
td.classList.toggle('selected')切换 - 如果需要单选（只能一个高亮），得先清除所有
.selected，再加到当前td
特别注意：如果表格用了 border-collapse: collapse，高亮时边框可能被遮盖，建议在 .selected 里显式设置 border 或用 outline 避免视觉断裂。
立即学习“前端免费学习笔记（深入）”；
为什么点了没反应？常见拦截点
三个最容易卡住的地方：
-
<td>里嵌了<button>、<a>或其他可交互元素，事件被子元素捕获并阻止冒泡——加e.stopPropagation()或改用委托到<tr> - 表格动态生成（比如用 JS 插入），但事件监听写在 DOM 加载前——把监听逻辑放到
DOMContentLoaded里，或用事件委托（上面已提） - CSS 设置了
pointer-events: none（常见于禁用态表格），导致 click 不触发——检查 computed styles
移动端点击有延迟或不准怎么办
纯 click 在 iOS Safari 和部分安卓浏览器上有约 300ms 延迟，且小单元格容易误触。解决方式：
- 加
touchstart事件替代，但注意它不冒泡，得监听到<td>自身（不能只靠委托） - 给
<td>加style="cursor: pointer"提升点击反馈 - 单元格太小（比如 20px × 20px）时，用
min-width/min-height拉宽热区，别只靠 padding
真实项目里，往往要同时监听 click 和 touchstart，并用 preventDefault() 防止双触发——这点很容易漏，一漏就点两下才生效。
