本文介绍如何在保留原有点击功能的前提下，通过事件委托与 CSS 类控制，实现点击 <td> 时高亮其所在 <tr> 行，并自动取消之前高亮，支持多表格共存。
本文介绍如何在保留原有点击功能的前提下，通过事件委托与 css 类控制，实现点击 `
在实际开发中，我们常需为表格行添加交互反馈（如点击高亮），但又不能破坏已有的业务逻辑（例如 onclick="getModelData(...)"）。直接在 HTML 中使用内联 onclick 属性不仅难以维护，还导致 this 上下文丢失、无法自然访问 DOM 元素关系（如父级 <tr>），进而使高亮逻辑失效。
推荐方案：采用数据驱动 + 事件委托 + CSS 类切换
首先，摒弃内联 JavaScript，改用 data-* 属性存储业务参数，将渲染与交互解耦：
// 使用 map + 模板字符串生成结构化 HTML（更安全、易读）
const html = data.map(obj => `
<tr>
<td>${escapeHtml(obj.plant_name)}</td>
<td>${escapeHtml(obj.loc_name)}</td>
<td class="pointer text-center"
data-werks="${escapeHtml(obj.werks)}"
data-lgort="${escapeHtml(obj.lgort)}">
${escapeHtml(obj.total)}
</td>
</tr>`
).join('');
$("#rows").html(html);✅ 小贴士：escapeHtml() 可防止 XSS（示例中可引入简单转义函数，如 str => str.replace(/[&<>"']/g, c =>${c.charCodeAt(0)};`)）。
接着，统一绑定事件处理器——利用 jQuery 的 .on() 实现事件委托，精准捕获 .pointer 单元格点击：
// 支持多表格：限定作用域为当前 tbody，避免跨表干扰
$("#rows").on("click", "td.pointer", function(e) {
const $td = $(this);
const $tr = $td.closest("tr");
// 同一 tbody 内仅保留一个高亮行（排他性）
$tr.siblings(".highlight").addBack().toggleClass("highlight");
// 安全调用原业务逻辑（传参从 data 属性读取）
getModelData($td.data("werks"), $td.data("lgort"));
});最后，通过 CSS 类而非内联样式控制视觉状态，提升可维护性与性能：
/* 推荐：使用语义化类名，便于主题切换 */
tr.highlight {
background-color: #fff3cd !important; /* 浅黄高亮，兼顾可读性 */
font-weight: 500;
}
/* 可选：添加过渡效果增强体验 */
tr {
transition: background-color 0.2s ease;
}关键优势总结：
- ✅ 无侵入式改造：不修改原有 getModelData 函数，仅调整调用方式；
- ✅ 自动排他控制：.siblings(".highlight").addBack().toggleClass() 一行实现“点击新行 → 取消旧高亮 → 高亮当前行”；
- ✅ 多表格安全：事件委托绑定到 #rows，天然隔离不同 <tbody>；
- ✅ 符合现代实践：告别 onclick，拥抱数据属性 + 事件委托 + CSS 类管理状态。
⚠️ 注意事项：若表格动态加载（如分页、搜索刷新），请确保每次重绘后重新绑定事件（或始终使用委托绑定，如本例所示，无需重复绑定）。
