实现表格列排序与排序状态图标动态显示的完整方案

本文提供一套轻量、健壮的原生 javascript 表格排序解决方案，支持数字/字符串自动类型识别、点击切换升序/降序、仅对含按钮的可排序列生效，并通过 `data-dir` 属性与 css 伪元素精准控制排序图标显示，彻底规避非排序列误触发、状态记忆错乱及冗余 dom 操作等问题。

在构建数据表格交互功能时，一个常见且关键的需求是：用户点击表头即可按该列排序，同时视觉上清晰反馈当前排序方向（↑ 升序 / ↓ 降序）。但直接监听

元素容易导致非排序列（如“Image”列）意外触发逻辑；而使用全局变量（如 this.asc）则无法为每列独立维护排序状态，造成点击即重置、二次点击才切方向等体验缺陷。

以下是一套经过实践验证、结构清晰、可直接集成的专业级实现：

✅ 核心改进点

• 精准事件绑定：监听的是 而非 ，确保只有显式声明为可排序的列才能响应；
  列级状态管理：利用 button.dataset.prevDir 为每个按钮独立记录上一次排序方向，首次点击即按预设逻辑（如默认升序）执行，再次点击立即切换；
  零冗余 DOM 查询：避免 getElementsByTagName(“button”) + 手动索引数组，改用 document.querySelectorAll(‘button’) 一次性获取并复用；
  语义化属性操作：统一使用 element.dataset.dir 替代 setAttribute(“data-dir”, …)，更符合现代 Web API 规范且性能更优。

  ? 完整可运行代码

     
       
         
  Image
          
  Number
         
  Name
         
  Postal code
       
     
     
       
  IMG1
  123
  John Johnson
  56430
       
  IMG2
  456
  Sally Johnson
  56430
     
   

  // JavaScript 排序逻辑（建议置于