Google Maps API应用表格行高亮首次点击无效问题求助

一、点击表格行首次无高亮、第二次才生效的原因 #

你的highlight_row()函数核心逻辑是给所有表格行添加点击事件监听，但这个函数是在SetTourLocationRecordId()内部被调用的——也就是第一次点击表格行时，才会执行highlight_row()完成事件绑定。

第一次点击的完整流程：

1. 点击tr → 触发onclick绑定的SetTourLocationRecordId()
2. 函数内部调用highlight_row()，此时才完成所有tr的点击事件绑定
3. 但本次点击已经结束，刚绑定的事件不会回溯触发，因此看不到高亮效果

第二次点击流程：

1. 点击tr → 触发第一次点击时已经绑定好的点击事件
2. 执行高亮逻辑，所以能看到行被高亮

就算把highlight_row()放到全局作用域，只要是第一次点击时才调用它，本质逻辑没变——第一次点击仅完成事件绑定，第二次点击才会触发高亮。

二、把onclick放在span内首次点击有效，但仅能点击名称单元格的原因 #

当onclick绑定到<span>标签上时，表格渲染完成后，span的点击事件已经存在于DOM中。第一次点击span时，直接触发对应的函数（包含高亮逻辑），所以能立即看到效果。

而只能在名称单元格触发的原因很明确：点击事件仅绑定在名称单元格内的span上，其他单元格（城市、州、邮编等）没有绑定该事件，点击这些区域不会触发任何逻辑。

修复方案 #

核心思路：表格生成后立即绑定点击事件，而非等到点击行时再绑定；同时利用预定义的.highlighted类简化样式操作，避免直接修改元素style。

1. 调整表格生成逻辑，移除tr上的onclick，改用自定义属性存储数据 #

修改calculateDistance()中生成表格行的代码：

// 移除tr的onclick属性，通过data-*属性存储所需数据
resultHtml += `<tr data-record-id='${destination.Tour_Location_Record_Id}, ${destination.Tour_Location}, ${destination.Display_Name}, ${destination.Address1}, ${destination.Address2}, ${destination.State}, ${destination.City}, ${destination.Zip}, ${destination.Phone}'>
  <td><span>${destination.Display_Name}</span></td>
  <td>${destination.City}</td>
  <td>${destination.State}</td>
  <td>${destination.Zip}</td>
  <td>${distance}</td>
  <td>${duration}</td>
</tr>`;

2. 表格插入DOM后立即绑定事件 #

在calculateDistance()的回调中，插入表格后调用事件绑定函数：

if (resultHtml) {
  document.getElementById("result").innerHTML = resultHtml;
  // 表格渲染完成后立即绑定点击事件
  bindTableEvents();
}

3. 新增全局事件绑定函数，整合高亮与数据处理逻辑 #

function bindTableEvents() {
  const table = document.getElementById("display-table");
  // 排除表头行，只绑定数据行
  const rows = table.querySelectorAll("tr:not(:first-child)");

  rows.forEach(row => {
    row.addEventListener("click", function() {
      // 移除所有行的高亮类
      rows.forEach(r => r.classList.remove("highlighted"));
      // 给当前点击行添加高亮类
      this.classList.add("highlighted");

      // 处理原SetTourLocationRecordId中的数据逻辑
      const recordId = this.dataset.recordId;
      const dataArray = recordId.split(",");
      const splitData = dataArray.map(data => data.trim());

      const set_Tour_Location_Record_Id = splitData[0];
      const set_Tour_Location = splitData[1];
      const set_Display_Name = splitData[2];
      const set_Address1 = splitData[3];
      const set_Address2 = splitData[4];
      const set_State = splitData[5];
      const set_City = splitData[6];
      const set_Zip = splitData[7];
      const set_Phone = splitData[8];

      alert(`You have selected ${set_Tour_Location}`);
      console.log(set_Tour_Location_Record_Id);
      console.log(set_Tour_Location);
      // 其他console.log可按需保留
    });
  });
}

4. 删除原SetTourLocationRecordId()函数 #

数据逻辑已整合到bindTableEvents()中，原函数可直接移除。

修改后，表格生成完成即绑定好点击事件，第一次点击行就能触发高亮和数据处理，且点击整行任意单元格都能生效。

内容的提问来源于stack exchange，提问作者rayk