HTML表格排序异常：带单位数值列排序错误排查与解决

你的问题出在两个核心点上：

1. 原代码里的!isNaN(x.innerHTML)判断逻辑有漏洞——带单位的字符串（比如"548m / 1797ft"）转成数字会得到NaN，所以代码会走字符串排序分支。
2. 字符串排序是逐字符比较的：比如"1001m..."的首字符是'1'，"548m..."的首字符是'5'，字符串比较中'1' < '5'，所以"1001m..."会被判定为更小值，排在"548m..."前面，这和你预期的数值排序结果完全相反。

解决方案 #

针对带单位的列，我们需要先提取出里面的纯数字，再按数值大小排序。修改思路是：

• 新增工具函数，从单元格文本中提取有效数字（比如提取海拔的米数部分）。
• 在排序逻辑中优先使用提取到的数字进行比较，只有当提取失败时才回退到字符串排序。

修改后的完整代码 #

JavaScript代码

// 新增：从文本中提取第一个连续数字序列
function extractNumericValue(text) {
  const match = text.match(/\d+/);
  return match ? Number(match[0]) : null;
}

function sortTable(n) {
  var table,
    rows,
    switching,
    i,
    x,
    y,
    xValue,
    yValue,
    shouldSwitch,
    dir,
    switchcount = 0;
  table = document.getElementById("table");
  switching = true;
  dir = "asc";

  while (switching) {
    switching = false;
    rows = table.rows;

    for (i = 1; i < rows.length - 1; i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      
      // 提取两个单元格的数值
      xValue = extractNumericValue(x.innerHTML);
      yValue = extractNumericValue(y.innerHTML);

      // 优先按数值排序
      if (xValue !== null && yValue !== null) {
        if (dir == "asc") {
          if (xValue > yValue) {
            shouldSwitch = true;
            break;
          }
        } else if (dir == "desc") {
          if (xValue < yValue) {
            shouldSwitch = true;
            break;
          }
        }
      } else {
        // 数值提取失败，回退到字符串排序
        if (dir == "asc") {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        } else if (dir == "desc") {
          if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        }
      }
    }

    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

HTML代码（无需修改）

<table id="table" class="resp">
  <thead>
    <tr>
      <th onclick="sortTable(0)" class="sortable" scope="col">Position</th>
      <th onclick="sortTable(1)" class="sortable" scope="col">Sommet</th>
      <th onclick="sortTable(2)" class="sortable" scope="col">Altitude</th>
    </tr>
  </thead>
  <tr>
    <td data-label="Position">1</td>
    <td data-label="Sommet">Mont Marcy</td>
    <td data-label="Altitude">1629m / 5343ft</td>
  </tr>
  <tr>
    <td data-label="Position">2</td>
    <td data-label="Sommet">Mont Algonquin</td>
    <td data-label="Altitude">1559m / 5114ft</td>
  </tr>
  <tr>
    <td data-label="Position">3</td>
    <td data-label="Sommet">Mont Haystack</td>
    <td data-label="Altitude">1510m / 4953ft</td>
  </tr>
  <tr>
    <td data-label="Position">4</td>
    <td data-label="Sommet">Mont Skylight</td>
    <td data-label="Altitude">1501m / 4923ft</td>
  </tr>
  <tr>
    <td data-label="Position">5</td>
    <td data-label="Sommet">Mont Whiteface</td>
    <td data-label="Altitude">1483m / 4864ft</td>
  </tr>
  <tr>
    <td data-label="Position">6</td>
    <td data-label="Sommet">Mont Dix</td>
    <td data-label="Altitude">1481m / 4858ft</td>
  </tr>
  <tr>
    <td data-label="Position">7</td>
    <td data-label="Sommet">Mont Gray</td>
    <td data-label="Altitude">1475m / 4838ft</td>
  </tr>
  <tr>
    <td data-label="Position">8</td>
    <td data-label="Sommet">Mont Iroquois</td>
    <td data-label="Altitude">1475m / 4838ft</td>
  </tr>
  <tr>
    <td data-label="Position">9</td>
    <td data-label="Sommet">Mont Iroquois</td>
    <td data-label="Altitude">1001m / 3283ft</td>
  </tr>
  <tr>
    <td data-label="Position">10</td>
    <td data-label="Sommet">Mont St-Bruno</td>
    <td data-label="Altitude">548m / 1797ft</td>
  </tr>
  <tr>
    <td data-label="Position">11</td>
    <td data-label="Sommet">Mont Royal</td>
    <td data-label="Altitude">472m / 1548ft</td>
  </tr>
</table>

关键修改说明 #

1. extractNumericValue函数：用正则/\d+/匹配文本中的第一个连续数字序列，转成数字返回；如果没有匹配到数字，返回null。
2. 排序逻辑调整：先尝试提取两个单元格的数值，只要能提取到有效数字，就按数值大小比较；只有当提取失败时，才回退到原有的字符串排序逻辑。
3. 这样修改后，Altitude列会按米数的数值大小排序，1001m会排在548m前面，符合数值排序的预期，同时不影响纯数字列（比如Position）和字符串列（比如Sommet）的原有排序功能。

内容的提问来源于stack exchange，提问作者f.soucy