如何使用JavaScript实现表格地址的按街道+门牌号排序？

当前代码的问题是直接按字符串字典序排序，这种方式会把地址里的门牌号当作普通字符串比较，导致不符合地址的自然排序逻辑。要实现「先按街道分组，同街道下按门牌号数字排序」的效果，需要先解析地址，拆分出门牌号和街道部分，再分层比较。

修改后的代码 #

function SetDataTable() {
    const tablerowsResult = document.querySelectorAll('#Resultbody tr'),
        tableheadingsResult = document.querySelectorAll('#ResultTable thead th.click');

    tableheadingsResult.forEach((head, i) => {
        let sortasc = true;
        head.onclick = () => {
            tableheadingsResult.forEach(head => head.classList.remove('active'));
            head.classList.add('active');

            document.querySelectorAll('td').forEach(td => td.classList.remove('active'))
            tablerowsResult.forEach(row => {
                row.querySelectorAll('td')[i].classList.add('active')
            })

            head.classList.toggle('asc', sortasc);
            sortasc = !sortasc;
            sortTableResult(i, sortasc);
        }
    })
}

// 辅助函数：解析地址，返回门牌号数字和街道字符串
function parseAddress(address) {
    // 匹配开头的数字作为门牌号，剩下的部分是街道
    const match = address.match(/^(\d+)\s*(.*)$/);
    if (match) {
        return {
            number: parseInt(match[1], 10),
            street: match[2].toLowerCase().trim()
        };
    }
    // 处理格式异常的地址，默认返回原字符串和0
    return {
        number: 0,
        street: address.toLowerCase().trim()
    };
}

function sortTableResult(col, sortasc) {
    const tablerowsResult = document.querySelectorAll('#Resultbody tr');

    [...tablerowsResult].sort((a, b) => {
        const addressA = a.querySelectorAll('td')[col].textContent.trim();
        const addressB = b.querySelectorAll('td')[col].textContent.trim();
        
        const parsedA = parseAddress(addressA);
        const parsedB = parseAddress(addressB);

        // 先比较街道
        if (parsedA.street !== parsedB.street) {
            return sortasc 
                ? parsedA.street.localeCompare(parsedB.street) 
                : parsedB.street.localeCompare(parsedA.street);
        }
        // 街道相同则比较门牌号数字
        return sortasc 
            ? parsedA.number - parsedB.number 
            : parsedB.number - parsedA.number;
    }).forEach(sortedrow => document.querySelector('#Resultbody').appendChild(sortedrow));
}

关键改动说明 #

• 新增parseAddress辅助函数：通过正则从地址中提取出门牌号（转为数字类型）和街道文本，确保后续比较的是数字而非字符串。
• 修改排序逻辑：
  1. 优先比较街道名称（忽略大小写），用localeCompare保证自然语言排序的准确性。
  2. 街道相同时，比较门牌号数字，实现同街道内的数字升序/降序。
• 简化了sortasc的切换逻辑，直接用sortasc = !sortasc更简洁。

这样修改后，就能实现你期望的排序效果：先按街道分组，同街道下按门牌号数字从小到大（或从大到小）排列。

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