表格行点击高亮效果实现：如何兼顾原有事件逻辑

表格行点击高亮是提升用户体验的常见需求，但如何在保留原有事件逻辑的同时实现这一功能？本文将详细介绍一套兼顾功能与维护性的解决方案。

本文介绍如何在保留原有点击功能的前提下，实现点击 时高亮其所在 行，并自动取消其他行的高亮，同时避免内联 onclick 属性带来的维护与作用域问题。

开发过程中经常需要为表格行添加视觉反馈效果，比如点击高亮，但必须确保不影响现有业务逻辑。直接在单元格中使用内联事件处理不仅难以获取父行元素，还会引发this指向混乱、样式与行为耦合等问题，更无法统一管理交互状态。

最佳实践是采用事件委托配合自定义属性与CSS类控制样式，具体实施步骤包括：

1. 移除所有内联事件处理，改用jQuery的.on()方法进行事件绑定
2. 通过data-werks、data-lgort等自定义属性存储原函数所需参数
3. 点击时使用$td.closest('tr')定位目标行，先移除其他行的.highlight类，再切换当前行状态
4. 将原有业务逻辑封装到事件处理器中，确保功能完整性

完整实现代码如下：

// 构建 HTML（使用 map + 模板字符串，更安全、易读）
const html = data.map(obj => `
  
    ${escapeHtml(obj.plant_name)}
    ${escapeHtml(obj.loc_name)}
    
      ${escapeHtml(obj.total)}
    
  `).join('');
$("#rows").html(html);

// 统一绑定点击事件（支持动态生成的元素）
$("#rows").on("click", "td.pointer", function(e) {
  const $td = $(this);
  const $tr = $td.closest("tr");
  // 清除同表内其他高亮行（注意：仅影响当前 table > tbody#rows）
  $("#rows tr.highlight").not($tr).removeClass("highlight");
  $tr.toggleClass("highlight");
  // 调用原有业务逻辑（参数从 data 属性中安全读取）
  getModelData($td.data("werks"), $td.data("lgort"));
});

// 辅助函数：防止 XSS，对动态插入内容做基础转义
function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&")
    .replace(//g, ">")
    .replace(/"/g, """);
}

配套CSS样式建议：

tr.highlight {
  background-color: #ffebee !important; /* 浅红背景，醒目且不破坏 Bootstrap 样式优先级 */
  transition: background-color 0.2s ease;
}
/* 可选：增强可访问性，添加 focus 状态 */
tr.highlight td {
  outline: 2px solid #f44336;
}

该方案具有以下核心优势：

1. 关注点分离：HTML不含逻辑，JS不拼接HTML字符串，CSS独立控制视觉样式
2. 状态管理灵活：.highlight类可被复用，支持多表独立高亮控制
3. 代码健壮性：包含XSS防护和精准DOM定位机制
4. 向后兼容：保持原有函数调用方式，参数获取更安全可靠

需要注意的细节：

1. 多表格场景下应为每个tbody设置唯一ID，避免跨表操作
2. 处理与Bootstrap等框架的样式冲突问题
3. 考虑键盘导航等可访问性需求

这套方案不仅完美实现了表格行高亮功能，更通过标准化的事件处理和数据传递方式，显著提升了代码的可维护性和安全性，是前端交互开发的优秀实践范例。