JavaScript新手求助：Todo应用表头点击排序功能实现问题

你当前的代码存在几个核心问题，导致排序功能失效：

1. sortTitle是数组排序专用的比较函数，但你直接把它绑定到点击事件上——点击事件触发时传入的是Event对象，不是数组元素，所以访问a.title会直接报错。
2. 就算排序逻辑正确，你也没有把排序后的todos数组重新渲染到页面上，用户看不到变化。
3. 目前只写了标题排序的雏形，还没实现日期、状态、优先级的排序逻辑，也没做升序/降序切换。

修复后的完整实现（含多字段排序+升降序切换） #

先补全必要的HTML结构（这是DOM操作的基础）：

<table>
  <thead>
    <tr>
      <th id="sort-title">标题</th>
      <th id="sort-date">截止日期</th>
      <th id="sort-state">状态</th>
      <th id="sort-prio">优先级</th>
    </tr>
  </thead>
  <tbody id="todo-list">
    <!-- Todo项会在这里动态渲染 -->
  </tbody>
</table>

然后是修复后的JavaScript代码：

// 模拟Todo数据
const todos = [
  {id: 1, duedate: "2023-06-30", title: "Javascript Project 1", description: "first try", prio: 1, state: "done"},
  {id: 2, duedate: "2023-07-15", title: "Learn CSS Flexbox", description: "layout practice", prio: 2, state: "pending"},
  {id: 3, duedate: "2023-06-25", title: "Git Basics", description: "version control", prio: 3, state: "done"}
];

// 维护当前排序字段和方向（默认标题升序）
let currentSortField = 'title';
let currentSortDirection = 'asc';

// 获取DOM元素
const titleSortBtn = document.getElementById("sort-title");
const dateSortBtn = document.getElementById("sort-date");
const stateSortBtn = document.getElementById("sort-state");
const prioSortBtn = document.getElementById("sort-prio");
const todoListEl = document.getElementById("todo-list");

// 渲染Todo列表到DOM
function renderTodos() {
  todoListEl.innerHTML = '';
  todos.forEach(todo => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${todo.title}</td>
      <td>${todo.duedate}</td>
      <td>${todo.state}</td>
      <td>${todo.prio}</td>
    `;
    todoListEl.appendChild(row);
  });
}

// 通用排序函数，根据字段类型处理比较逻辑
function sortTodos(field) {
  // 切换排序方向（如果点击的是当前排序字段）
  if (field === currentSortField) {
    currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
  } else {
    currentSortField = field;
    currentSortDirection = 'asc';
  }

  todos.sort((a, b) => {
    let valA, valB;
    // 根据字段类型处理值
    switch(field) {
      case 'duedate':
        valA = new Date(a.duedate);
        valB = new Date(b.duedate);
        break;
      case 'prio':
        valA = Number(a.prio);
        valB = Number(b.prio);
        break;
      case 'state':
      case 'title':
      default:
        valA = a[field].toUpperCase();
        valB = b[field].toUpperCase();
    }

    // 比较并根据方向返回结果
    if (valA > valB) {
      return currentSortDirection === 'asc' ? 1 : -1;
    }
    if (valA < valB) {
      return currentSortDirection === 'asc' ? -1 : 1;
    }
    return 0;
  });

  // 重新渲染列表
  renderTodos();
}

// 绑定点击事件
titleSortBtn.addEventListener("click", () => sortTodos('title'));
dateSortBtn.addEventListener("click", () => sortTodos('duedate'));
stateSortBtn.addEventListener("click", () => sortTodos('state'));
prioSortBtn.addEventListener("click", () => sortTodos('prio'));

// 初始渲染
renderTodos();

关键修复点说明 #

• 把排序逻辑和事件处理分开：点击事件触发sortTodos函数，而不是直接用数组比较函数
• 新增renderTodos函数，负责把排序后的数组渲染到页面
• 用通用排序函数处理不同字段：针对日期、数字、字符串做不同的比较逻辑
• 增加升降序切换：重复点击同一表头时，切换排序方向

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