如何用jQuery实现表格列升降序双向排序及表格内文本框值排序

问题根因 #

现有代码无法切换降序的核心原因是：directions 数组定义在点击事件的回调函数内部，每次点击表头都会重新初始化所有列的排序状态为空，导致每次判断排序方向时都只会取默认的asc升序，永远触发不了降序逻辑。

修复双向排序的方案 #

只需要把directions数组移到点击事件外部，持久化保存每列的排序状态即可，修复后的完整JS代码如下：

// 将排序状态移到点击事件外部，持久化存储
const table = document.getElementById('tab_logic');
const headers = table.querySelectorAll('th');
const directions = Array.from(headers).map(function(header) {
  return '';
});

$("#sortcol").click(function() {
  const tableBody = table.querySelector('tbody');
  const rows = tableBody.querySelectorAll('tr');
  
  const transform = function(index, content) {
    const type = headers[index].getAttribute('data-type');
    switch (type) {
      case 'number':
        return parseFloat(content);
      case 'string':
      default:
        return content.trim(); // 新增trim处理，避免输入值首尾空格影响排序结果
    }
  };
  
  const sortColumn = function(index) {
    const direction = directions[index] || 'asc';
    const multiplier = direction === 'asc' ? 1 : -1;
    const newRows = Array.from(rows);
    
    newRows.sort(function(rowA, rowB) {
      const cellA = rowA.getElementsByTagName("td")[index];
      const cellB = rowB.getElementsByTagName("td")[index];
      const cellC = $(cellA).find('input').val();
      const cellD = $(cellB).find('input').val();
      const a = transform(index, cellC);
      const b = transform(index, cellD);
      if (a > b) return 1 * multiplier;
      if (a < b) return -1 * multiplier;
      return 0;
    });
    
    // 简化旧行删除逻辑，直接清空tbody
    tableBody.innerHTML = '';
    // 切换当前列的排序状态
    directions[index] = direction === 'asc' ? 'desc' : 'asc';
    // 插入排序后的行
    newRows.forEach(function(newRow) {
      tableBody.appendChild(newRow);
    });
  };
  
  sortColumn(1);
});

如果后续需要支持多列表头点击排序，只需要给所有th绑定点击事件，获取当前点击列的索引传给sortColumn即可，现有逻辑不用做大幅调整。

其他支持单元格文本框值排序的可选方案 #

• 直接使用jQuery的tablesorter插件，该插件支持自定义单元格值提取规则，只需要配置优先读取单元格内input的value即可，不需要手动实现排序逻辑
• 如果是Vue/React等框架开发场景，直接把表格行数据存在响应式数组中，点击表头时直接对数组做排序，视图会自动同步更新，不需要手动操作DOM，也天然支持输入框值同步排序，避免DOM操作带来的状态丢失问题

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