HTML表格需同时支持字母与数字正确排序的技术修复请求

问题说明 #

现有代码能实现HTML表格的字母排序，支持忽略换行、空格及内部HTML，但遇到包含数字的列（如示例中的第2列）时，无法按数字逻辑（1、2、14、17）排序，而是按首数字归类排列。需要实现同时兼容字母与数字的自然排序逻辑。

现有代码 #

JavaScript代码 #

window.onload = function() {
  document.querySelectorAll('th').forEach((element) => { // Table headers
    element.addEventListener('click', function() {
      let table = this.closest('table');

      // If the column is sortable
      if (this.querySelector('span')) {
        let order_icon = this.querySelector('span');
        let order = encodeURI(order_icon.innerHTML).includes('%E2%86%91') ? 'desc' : 'asc';
        let separator = '-----'; // Separate the value of it's index, so data keeps intact

        let value_list = {}; // <tr> Object
        let obj_key = []; // Values of selected column

        let string_count = 0;
        let number_count = 0;

        // <tbody> rows
        table.querySelectorAll('tbody tr').forEach((line, index_line) => {
          // Value of each field
          let key = line.children[element.cellIndex].textContent.toUpperCase().trim();

          // Check if value is date, numeric or string
          if (line.children[element.cellIndex].hasAttribute('data-timestamp')) {
            // if value is date, we store it's timestamp, so we can sort like a number
            key = line.children[element.cellIndex].getAttribute('data-timestamp');
          } else if (key.replace('-', '').match(/^[0-9,.]*$/g)) {
            number_count++;
          } else {
            string_count++;
          }

          value_list[key + separator + index_line] = line.outerHTML.replace(/(\t)|(\n)/g, ''); // Adding <tr> to object
          obj_key.push(key + separator + index_line);
        });
        if (string_count === 0) { // If all values are numeric
          obj_key.sort(function(a, b) {
            return a.split(separator)[0] - b.split(separator)[0];
          });
        } else {
          obj_key.sort();
        }

        if (order === 'desc') {
          obj_key.reverse();
          order_icon.innerHTML = '&darr;';
        } else {
          order_icon.innerHTML = '&uarr;';
        }

        let html = '';
        obj_key.forEach(function(chave) {
          html += value_list[chave];
        });
        table.getElementsByTagName('tbody')[0].innerHTML = html;
      }
    });
  });
}

HTML代码 #

<table border="1" id="myTable2" class="resize-table-font">
  <thead>
    <tr>
      <th>
        <p align="center">name <span>&uarr;</span></p>
      </th>
      <th>
        <p align="center">ref <span>&uarr;</span></p>
      </th>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>(book 3: 16)</td>
  </tr>
  <tr>
    <td>22</td>
    <td>(book 3: 16)</td>
  </tr>
  <tr>
    <td>book</td>
    <td>(book 2: 1-3)</td>
  </tr>
  <tr>
    <td>2</td>
    <td>(book 19: 12)</td>
  </tr>
  <tr>
    <td>how</td>
    <td>(book 19: 10, 12)</td>
  </tr>
  <tr>
    <td>when</td>
    <td>(book 19: 28; 21: 31)؟</td>
  </tr>
  <tr>
    <td>love</td>
    <td>(book 19: 30; 21: 31)؟</td>
  </tr>
  <tr>
    <td>3</td>
    <td>(book 10: 41; 14: 6, 7; 15: 3)</td>
  </tr>
  <tr>
    <td>tg</td>
    <td>(book 21: 30)</td>
  </tr>
  <tr>
    <td>web</td>
    <td>(book 19: 26; 21: 30)</td>
  </tr>
  <tr>
    <td>internet</td>
    <td>(book 15: 32; 19: 7)</td>
  </tr>
  <tr>
    <td>far4</td>
    <td>(book 19: 13)</td>
  </tr>
  <tr>
    <td>far3</td>
    <td>(book 21: 32)</td>
  </tr>
  <tr>
    <td>far33</td>
    <td>(book 20: 8; 21: 27)</td>
  </tr>
</table>

修改后的解决方案 #

核心改动是替换原来的排序逻辑，使用JavaScript的localeCompare方法并开启numeric: true参数，实现自然排序——不管是纯数字、纯字符串还是带数字的字符串，都能按符合直觉的规则排序。同时保留原有的索引分隔逻辑，避免相同值的行排序时混乱。

修改后的JavaScript代码 #

window.onload = function() {
  document.querySelectorAll('th').forEach((element) => {
    element.addEventListener('click', function() {
      let table = this.closest('table');
      if (this.querySelector('span')) {
        let order_icon = this.querySelector('span');
        let order = encodeURI(order_icon.innerHTML).includes('%E2%86%91') ? 'desc' : 'asc';
        let separator = '-----';

        let value_list = {};
        let obj_key = [];

        // 遍历行收集数据，保留日期判断逻辑
        table.querySelectorAll('tbody tr').forEach((line, index_line) => {
          let cell = line.children[element.cellIndex];
          let key = cell.textContent.toUpperCase().trim();

          // 日期类型依然用timestamp排序
          if (cell.hasAttribute('data-timestamp')) {
            key = cell.getAttribute('data-timestamp');
          }

          value_list[key + separator + index_line] = line.outerHTML.replace(/(\t)|(\n)/g, '');
          obj_key.push(key + separator + index_line);
        });

        // 通用自然排序逻辑
        obj_key.sort(function(a, b) {
          const valA = a.split(separator)[0];
          const valB = b.split(separator)[0];
          // 使用localeCompare开启数字自然排序，同时处理大小写
          return valA.localeCompare(valB, undefined, { numeric: true, sensitivity: 'base' });
        });

        // 处理升降序
        if (order === 'desc') {
          obj_key.reverse();
          order_icon.innerHTML = '↓';
        } else {
          order_icon.innerHTML = '↑';
        }

        // 更新表格内容
        let html = '';
        obj_key.forEach(function(chave) {
          html += value_list[chave];
        });
        table.getElementsByTagName('tbody')[0].innerHTML = html;
      }
    });
  });
}

关键改动说明 #

1. 移除了数字/字符串计数判断：原来的逻辑只能处理全数字或全字符串列，现在用localeCompare统一处理所有情况
2. 启用自然排序：localeCompare的numeric: true参数会自动识别字符串中的数字部分，按数字大小排序（比如far3 < far4 < far33）
3. 保留日期排序逻辑：原有的data-timestamp处理逻辑不变，确保日期按时间顺序排列
4. 大小写不敏感排序：sensitivity: 'base'参数让排序忽略大小写差异，符合字母排序的常规需求

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