HTML表格长日期排序需求：需按年-月-日规则实现正反向排序

我来帮你搞定这个日期排序的问题！目前你的表格是按「日→月→年」的顺序排序，这肯定会导致时间逻辑混乱——比如2023年1月10日会排在2022年12月31日前面，因为日的数值更小。要改成按「年→月→日」的「从旧到新」（及反向）排序，只需要调整日期比较的优先级即可。

核心修改思路 #

你需要找到负责日期排序的函数，把原来的日、月、年比较顺序，改成先比年份，再比月份，最后比日期。这里有两种可靠的实现方式：

方式1：直接按数字字段比较（适合固定DD/MM/YYYY格式）

如果你的日期格式是固定的日/月/年，可以拆分后直接按年、月、日的顺序做数值比较：

// 修改后的日期排序函数（从旧到新）
function sortByDateAsc(a, b) {
  // 拆分日期字符串为日、月、年
  const [dayA, monthA, yearA] = a.split('/');
  const [dayB, monthB, yearB] = b.split('/');
  
  // 先比年份，年份不同直接返回差值
  if (yearA !== yearB) return yearA - yearB;
  // 年份相同再比月份
  if (monthA !== monthB) return monthA - monthB;
  // 月份相同最后比日期
  return dayA - dayB;
}

// 反向排序（从新到旧）
function sortByDateDesc(a, b) {
  return sortByDateAsc(b, a);
}

方式2：转换成Date对象比较（更鲁棒，兼容格式变化）

如果担心日期格式可能有变动，或者想避免手动拆分的误差，推荐转换成Date对象来比较：

// 从旧到新排序
function sortByDateAsc(a, b) {
  // 把DD/MM/YYYY格式转为YYYY-MM-DD，符合Date构造函数的标准格式
  const [dayA, monthA, yearA] = a.split('/');
  const dateA = new Date(`${yearA}-${monthA}-${dayA}`);
  
  const [dayB, monthB, yearB] = b.split('/');
  const dateB = new Date(`${yearB}-${monthB}-${dayB}`);
  
  // Date对象相减会返回时间戳差值，正数表示a比b晚，负数表示a更早
  return dateA - dateB;
}

// 反向排序
function sortByDateDesc(a, b) {
  return dateB - dateA;
}

集成到表头点击逻辑 #

找到你绑定表头点击事件的代码，当点击日期表头时，切换调用上述的升序/降序函数即可。比如：

// 假设你的表头点击逻辑大概是这样
let isDateAsc = true;

document.querySelector('.date-header').addEventListener('click', () => {
  const rows = Array.from(document.querySelectorAll('.table-row'));
  
  rows.sort((rowA, rowB) => {
    const dateA = rowA.querySelector('.date-cell').textContent.trim();
    const dateB = rowB.querySelector('.date-cell').textContent.trim();
    
    return isDateAsc ? sortByDateAsc(dateA, dateB) : sortByDateDesc(dateA, dateB);
  });
  
  // 重新渲染排序后的行
  const tableBody = document.querySelector('.table-body');
  rows.forEach(row => tableBody.appendChild(row));
  
  // 切换排序方向
  isDateAsc = !isDateAsc;
});

这样调整后，点击日期表头就会按照年→月→日的逻辑从旧到新排序，再次点击则反向从新到旧排序，完全符合时间顺序的需求。

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