解决表格行点击高亮延迟生效（首次点击无效）的完整方案

function SetTourLocationRecordId(recordId) {   // ...其他逻辑   highlight_row(); // ❌ 错误调用位置    function highlight_row() {     var table = document.getElementById("display-table");     var rows = table.getElementsByTagName("tr");     for (var i = 0; i < rows.length; i++) {       rows[i].addEventListener("click", function () { // ⚠️ 每次都新增监听器！         // 重置 + 高亮逻辑       });     }   } }

这导致两个严重问题：

• 首次点击时，highlight_row() 尚未执行 → 监听器未注册 → 无响应；
• 后续点击会不断叠加监听器 → 同一行点击触发多次样式切换，造成闪烁或错乱；
• 内联 onclick=”SetTourLocationRecordId(…)” 还将大量结构化数据拼接为字符串参数，既不安全（xss 风险）又难维护。

✅ 正确解法：事件委托 + 动态绑定 + CSS 类控制

我们应遵循现代 Web 开发最佳实践：

• 避免内联事件处理器（onclick 属性），改用 addEventListener；
• 不在渲染后重复绑定，而是在表格生成后一次性绑定事件委托；
• 使用 classList 管理状态，而非直接操作 style.backgroundColor（便于主题扩展与 CSS 维护）；
• *通过 `data-` 属性传递结构化数据**，安全且语义清晰。

✅ 修复后的核心逻辑（精简示意）

<style>   tr.row_highlight {     background-color: #1e90ff !important;     color: snow !important;   } </style>  <script>   // ✅ 1. 表格渲染完成后，为容器绑定一次事件委托   function bindTableEvents() {     const resultDiv = document.getElementById('result');      // 移除旧监听器（防重复绑定）     resultDiv.removeEventListener('click', handleTableClick);     resultDiv.addEventListener('click', handleTableClick);   }    // ✅ 2. 统一处理点击：只响应 <td> 或 <tr> 的点击，精准定位目标行   function handleTableClick(e) {     const row = e.target.closest('tr');     if (!row || row === row.parentElement.querySelector('tr:first-child')) return; // 跳过表头      // 清除所有高亮     row.parentElement.querySelectorAll('tr').forEach(r => r.classList.remove('row_highlight'));     // 高亮当前行     row.classList.add('row_highlight');      // 安全读取数据（json 字符串转对象）     const data = JSON.parse(row.dataset.json || '{}');     console.log('Selected:', data.Display_Name, data.Tour_Location_Record_Id);     // ✅ 此处可安全调用业务逻辑（如弹窗、跳转等）   }    // ✅ 3. 渲染表格时，用 data-json 存储整行数据   function renderResults(response) {     let html = `<table id="display-table"><tr>       <th>Display Name</th><th>City</th><th>State</th><th>Zip</th><th>Distance</th><th>Drive Time</th>     </tr>`;      Object.values(destinationAddresses).forEach(dest => {       const json = JSON.stringify(dest);       html += `         <tr data-json='${json.replace(/'/g, "'")}'> <!-- 转义单引号 -->           <td>${dest.Display_Name}</td>           <td>${dest.City}</td>           <td>${dest.State}</td>           <td>${dest.Zip}</td>           <td>${/* distance */}</td>           <td>${/* duration */}</td>         </tr>`;     });     html += '</table>';      document.getElementById('result').innerHTML = html;     bindTableEvents(); // ✅ 关键：立即绑定事件   } </script>

⚠️ 注意事项与进阶建议

• JSON 数据转义：data-json 中若含单引号（如 O’Reilly），需先 replace(/’/g, “‘”)，否则 HTML 解析失败；
• 性能优化：对大型表格，可考虑 debounce 高亮逻辑，或使用 CSS :has()（现代浏览器）实现纯 CSS 高亮（需配合 :focus-within 或 checkbox hack）；
• 无障碍支持：为
  添加 tabindex=”0″ 并监听 keydown（Enter/Space），确保键盘用户可用；

• Google Maps API 加载时机：务必确保 init() 或主逻辑在 google.maps 全局对象就绪后执行（推荐使用 callback=init 参数加载 SDK）。

✅ 总结

首次点击失效的本质，是事件监听器注册滞后于用户交互。正确做法是：
① 分离关注点——渲染逻辑（生成 HTML）与交互逻辑（绑定事件）解耦；
② 使用事件委托——监听父容器，避免为每个

单独绑定；
③ 以 class 驱动样式——用 classList.add/remove 替代内联样式，提升可维护性与可测试性；
④ 结构化数据传递——用 dataset 安全携带 JSON，杜绝字符串拼接风险。

按此方案重构后，高亮功能将100% 在首次点击即刻生效，且代码更健壮、可扩展、符合现代前端工程规范。