应监听 table 事件利用冒泡捕获 td，用 event.target.tagName === 'TD' 判断点击目标，通过 classList.toggle('selected') 切换样式，避免内联事件和直接操作 style，注意 CSS 权重、动态渲染时机及键盘/右键兼容性。
怎么给表格单元格绑定点击变色逻辑
直接给 <td> 加 onclick 行内事件虽然能用，但不推荐——它会污染 HTML 结构，且无法统一管理状态。正确做法是用 JavaScript 监听父级 <table> 的事件，利用事件冒泡机制捕获点击的 <td>。
关键点在于：必须用 event.target 判断是否真的点在 <td> 上，因为用户可能点到 <tr>、<tbody> 甚至空白处。同时要避免重复监听或内存泄漏，建议用 addEventListener 一次绑定即可。
- 确保表格有明确的
id或类名，方便 JS 定位，比如<table id="data-table"> - 不要对每个
<td>单独加监听器，性能差且难维护 - 如果表格动态渲染（如 AJAX 加载），监听必须在 DOM 渲染完成后执行，否则找不到元素
如何切换样式而不是硬编码颜色
用 classList.toggle() 比直接操作 style.backgroundColor 更可控。前者靠 CSS 类控制视觉，后者容易和已有样式冲突，还难以复用或响应主题切换。
例如定义一个 .selected 类：
立即学习“前端免费学习笔记（深入）”；
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
td.selected {
background-color: #4a90e2 !important;
color: white;
}
JS 中只需：
if (event.target.tagName === 'TD') {
event.target.classList.toggle('selected');
}
-
!important在这里有必要，因为<td>可能已有内联样式或更高优先级规则 - 如果需要单选（只能一个高亮），得先清除其他
.selected，用document.querySelectorAll('td.selected')遍历移除 - 注意：
classList.toggle()在 IE10+ 支持，若需兼容 IE9，改用className字符串拼接（但不推荐）
为什么点击后样式不生效或反复失效
常见原因不是 JS 写错了，而是 CSS 层叠或选择器权重压倒了你的 .selected 类。
- 检查浏览器开发者工具里，
.selected是否被划掉——说明被其他规则覆盖 - 避免用
td { background: ... }这种通用规则，改用更具体的类，比如.data-table td - 如果表格用了
border-collapse: collapse，某些浏览器下点击边缘可能触发不到<td>，可给td加padding确保点击热区 - React/Vue 等框架中，若表格是组件内动态生成，确保事件监听挂载时机正确（比如
useEffect或mounted钩子）
要不要支持取消选中或键盘辅助
纯鼠标点击 + 单次 toggle 看似够用，但真实场景常需要更健壮的交互：
- 用户可能想按
Ctrl多选，这时需判断event.ctrlKey，只对<td>切换而非清空全部 - 无障碍要求：给
<td>加tabindex="0"，再监听keydown（如 Enter/Space 键）触发相同逻辑 - 如果表格内容含表单控件（如
<input>），点击它们不应触发变色，需在event.target判断是否为<td>自身，而非其子元素
最易被忽略的是：没考虑右键点击，event.button === 0 要加判断，否则右键也会触发变色。
