HTML表格如何实现优先排序数值、忽略短横线等非数值内容

问题根源 #

你当前的排序逻辑存在两个核心问题：

• 直接对比单元格原始字符串的Unicode编码，-的编码值远小于数字字符，升序时自然会排在数值前面
• 没有将单元格内容转换为数值类型比较，后续出现多位数、小数时还会出现10 < 2这类字符串比较的典型错误

修复后代码 #

function sortTablee(dir) {
    var table, rows, switching, i, x, y, shouldSwitch, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;

    // 辅助函数：判断内容是否为有效数值，转换失败返回null
    function parseNumber(content) {
        const num = parseFloat(content.trim());
        return isNaN(num) ? null : num;
    }

    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[1];
            y = rows[i + 1].getElementsByTagName("TD")[1];
            const xVal = parseNumber(x.innerHTML);
            const yVal = parseNumber(y.innerHTML);

            // 优先级判断：数值永远排在非数值前面
            if (xVal !== null && yVal === null) {
                shouldSwitch = false;
            } else if (xVal === null && yVal !== null) {
                shouldSwitch = true;
            } else if (xVal !== null && yVal !== null) {
                // 两者都是数值时按排序方向比较
                if (dir == "asc") {
                    if (xVal > yVal) shouldSwitch = true;
                } else if (dir == "des") {
                    if (xVal < yVal) shouldSwitch = true;
                }
            }
            // 两者都是非数值时默认不调整顺序，也可自行补充字符串比较逻辑
            if (shouldSwitch) break;
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount++;
        }
    }
}

修改说明 #

• 所有有效数值会始终排在非数值（短横线、空值、其他字符等）的顶部，和排序方向无关
• 数值之间使用转换后的数字类型比较，不会再出现字符串排序的逻辑错误
• 如果需要对非数值内容也做排序，可以在两个值都为null的分支下补充字符串对比逻辑即可

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