本文介绍如何在保留原有点击功能的前提下，通过 jQuery 实现点击 <td> 时高亮其所在 <tr> 行，并自动取消其他行的高亮，同时避免内联 onclick 的硬编码问题，提升代码可维护性与健壮性。
本文介绍如何在保留原有点击功能的前提下，通过 jquery 实现点击 `
在实际开发中，我们常需为表格行添加交互反馈（如点击高亮），但若 <td> 已绑定内联 onclick 事件（如调用 getModelData()），直接修改样式会面临作用域丢失、this 指向错误、多表冲突等问题。核心解决方案是：*弃用内联事件，改用委托式事件监听 + `data-` 属性解耦参数 + CSS 类控制样式**。
✅ 推荐实现方式（结构清晰、可扩展、符合现代实践）
首先，重构 HTML 生成逻辑，移除 onclick="getModelData(...)"，改用语义化 data-* 属性存储参数：
// 使用 map + 模板字符串构建 HTML，更安全、易读
const html = data.map(item => `
<tr>
<td>${item.plant_name}</td>
<td>${item.loc_name}</td>
<td class="pointer text-center"
data-werks="${item.werks}"
data-lgort="${item.lgort}"
data-total="${item.total}">
${item.total}
</td>
</tr>
`).join('');
$('#rows').html(html);接着，统一绑定事件处理器，兼顾高亮切换与原有业务逻辑：
// 使用事件委托，支持动态插入的表格行
$('#rows').on('click', 'td.pointer', function(e) {
const $td = $(this);
const $tr = $td.closest('tr');
// 1️⃣ 清除同表内其他高亮行（注意：仅影响当前 tbody，多表互不干扰）
$tr.siblings('.highlight').removeClass('highlight');
// 2️⃣ 切换当前行高亮状态
$tr.toggleClass('highlight');
// 3️⃣ 安全执行原有业务逻辑（参数从 data 属性读取）
const werks = $td.data('werks');
const lgort = $td.data('lgort');
getModelData(werks, lgort); // 原有函数仍可正常调用
});最后，通过 CSS 类而非内联样式控制视觉效果，便于主题定制与维护：
/* 推荐：用 class 控制样式，而非 .css() 方法 */
tr.highlight {
background-color: #ffebee !important; /* 浅红背景，可按需调整 */
box-shadow: inset 0 0 8px rgba(255, 77, 77, 0.3);
}
/* 移除过时的 <u> 标签，改用 CSS 下划线 */
td.pointer {
text-decoration: underline;
cursor: pointer;
}⚠️ 关键注意事项
- 不要混用内联 onclick 和 jQuery 事件：内联函数中 this 指向 <td>，但无法直接访问 jQuery 对象；且多个 onclick 串联易出错。
- .closest('tr') 是可靠定位父行的方式：比 $(this).parent() 更健壮（兼容嵌套元素）。
- 使用 $('#rows').on(...) 而非 $('td.pointer').on(...)：确保对后续动态渲染的行也生效（如分页加载）。
- 高亮范围限定在当前 <tbody> 内：.siblings('.highlight') 不会影响其他表格，天然支持多表独立操作。
- 避免 !important 过度使用：若 Bootstrap 等框架样式优先级高，可增加选择器权重（如 table .table-sm tbody tr.highlight）。
✅ 总结
该方案将「行为」（事件逻辑）、「数据」（data-* 属性）和「表现」（CSS 类）彻底分离，既满足点击高亮需求，又无缝集成原有业务函数，同时具备良好的可测试性、可维护性与跨表兼容性。推荐作为表格交互的标准实践。
