后台列表页最常见的需求：点击表头排序 + 一键全选。本文用原生js代码实现零依赖方案，涵盖 DOM 查询、排序算法、事件代理三大核心技能。

效果速览

一、核心思路

1. 事件入口：为每个 <th> 绑定点击，首列是复选框，直接 return
2. 排序函数：把 NodeList 转成数组，利用 sort + localeCompare 处理中文
3. 复选联动：全选按钮用事件冒泡阻止，单行用计数器实时同步

二、代码拆解

1.元素骨架

2.排序逻辑

const arr = Array.prototype.slice
.call(rows)
.sort((a, b) => {
  const textA = a.cells[index].innerText;
  const textB = b.cells[index].innerText;
  return index === 2 || index === 4
    ? textA.localeCompare(textB, 'zh')
    : Number(textA) - Number(textB);
});
arr.forEach(tr => 
 tbody.appendChild(tr)
  ); 
// DOM 移动，无需删除再插入

3.复选联动

// 全选
checkAll.onclick = e => {
  e.stopPropagation();
  checkOneList.forEach(cb => 
     cb.checked = checkAll.checked);
};

// 单行
checkOneList.forEach(cb =>
  cb.onclick = () =>
    (checkAll.checked =
      Array.from(checkOneList)
     .every(c => c.checked))
);

三、边界与扩展

• 排序状态记忆：给 <th> 加 data-order 实现升降切换。
• 多选过滤：把排序结果同步给 filter 即可实现搜索 + 排序。
• 键盘支持：keydown 监听 Enter 或 Space 触发排序。