谷歌Distance Matrix API生成表格为距离最小值行变色问题求助

你遇到的识别异常本质是字符串字典序比较导致的：比如'1000'和'230'按字符串规则比较时，首字符'1' < '2'，系统会误判1000比230更小，这就是只能识别4位数字最小值的核心原因。即使调用了parseFloat，如果没有完全清洗掉非数字字符、或者比较时未统一转成数值类型，也会触发该问题。

你可以直接用以下JS代码实现需求：

// 动态渲染表格的场景可以把这段代码放在PHP渲染完成后的回调里，或者监听DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  const targetTable = document.getElementById('tablaDistancias');
  if (!targetTable) return;

  // 仅取tbody内的行，排除表头行
  const tableRows = Array.from(targetTable.querySelectorAll('tbody tr'));
  let minDistance = Infinity;
  // 存储每行对应的距离数值，避免二次提取
  const rowDistanceArr = [];

  // 第一步：遍历提取所有行的距离数值，计算最小值
  tableRows.forEach(row => {
    // 注意：这里的cells[2]代表取每行第3个单元格作为距离列，列索引从0开始计数，可根据你的实际表格结构修改
    const distanceCell = row.cells[2];
    // 清洗掉km、空格、千位分隔符等所有非数字/非小数点字符
    const pureDistanceStr = distanceCell.textContent.trim().replace(/[^0-9.]/g, '');
    const distanceVal = parseFloat(pureDistanceStr);
    // 无效距离默认设为无穷大，不参与最小值计算
    const validDistance = isNaN(distanceVal) ? Infinity : distanceVal;
    rowDistanceArr.push(validDistance);
    if (validDistance < minDistance) {
      minDistance = validDistance;
    }
  });

  // 第二步：给所有最小值对应的行加高亮
  tableRows.forEach((row, index) => {
    if (rowDistanceArr[index] === minDistance) {
      // 可以自定义背景色，也可以提前在CSS定义类，通过classList.add添加，更便于后续样式维护
      row.style.backgroundColor = '#d4edda';
    }
  });
});

注意事项 #

• 如果距离列不是第3列，修改row.cells[2]中的索引即可，第一列对应索引为0，第二列对应1，以此类推
• 代码支持同时高亮多个距离相同的最小值行
• 若表格是异步加载渲染的，需要把代码放在表格渲染完成的回调函数中执行，避免获取不到表格元素

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