如何使用JavaScript按剩余月数和天数对表格列进行排序

我来帮你搞定这个带月/天格式的时间列排序问题！核心思路是把文本格式的剩余时间转换成可用于排序的数值（总天数），再替换原有排序逻辑用这个数值来比较。

步骤1：编写时间解析辅助函数 #

先写个工具函数，把“X个月X天”“X天”这类文本转换成总天数，方便排序比较：

function parseRemainingTime(timeText) {
    // 提取月数，没有匹配到就设为0
    const monthMatch = timeText.match(/(\d+)个月/);
    const months = monthMatch ? parseInt(monthMatch[1], 10) : 0;
    // 提取天数，没有匹配到就设为0
    const dayMatch = timeText.match(/(\d+)天/);
    const days = dayMatch ? parseInt(dayMatch[1], 10) : 0;
    // 按每月30天计算总天数（如果需要更精确，可改成平均月天数30.44或者结合具体日期逻辑，通用场景下30天足够）
    return months * 30 + days;
}

步骤2：修改你的表格排序代码 #

把原有排序逻辑替换成基于总天数的比较，完整代码如下：

/* Table Sort */
$('body').on('click', '.sort-table th', function() {
    // 仅当表头有sortable类时触发排序
    if ($(this).hasClass('sortable')) {
        const $table = $(this).closest('.sort-table');
        const $tbody = $table.find('tbody');
        const columnIndex = $(this).index();
        // 记录当前排序方向（升序/降序），用data属性存状态
        const isAscending = $(this).data('sort-direction') !== 'desc';
        
        // 把表格行转换成数组，方便排序操作
        const rows = $tbody.find('tr').toArray();
        
        // 自定义排序逻辑
        rows.sort(function(a, b) {
            // 获取当前列的文本内容（自动忽略"剩余天数："这类前缀）
            const timeA = $(a).find('td').eq(columnIndex).text().trim();
            const timeB = $(b).find('td').eq(columnIndex).text().trim();
            
            // 转换成总天数进行比较
            const totalDaysA = parseRemainingTime(timeA);
            const totalDaysB = parseRemainingTime(timeB);
            
            // 根据排序方向返回比较结果
            return isAscending ? totalDaysA - totalDaysB : totalDaysB - totalDaysA;
        });
        
        // 把排序后的行重新插入表格
        $tbody.empty().append(rows);
        
        // 更新当前列的排序状态，方便下一次点击切换
        $(this).data('sort-direction', isAscending ? 'desc' : 'asc');
        // 可选：清除其他列的排序状态标记
        $table.find('th').not(this).data('sort-direction', '');
    }
});

额外说明 #

• 这个逻辑完美适配你给出的示例格式，排序结果会和你预期的一致：2天、11天、6个月6天、23个月25天
• 如果你的业务需要更精准的月份换算（比如按实际月份天数），可以修改parseRemainingTime里的换算规则，比如换成months * 30.44（平均月天数）或者结合具体日期计算，但绝大多数场景下30天的近似值足够满足排序需求
• 你还可以给表头加个箭头图标之类的CSS样式，结合data-sort-direction状态来提示用户当前的排序方向，提升交互体验

内容的提问来源于stack exchange，提问作者Tomas Sereičikas