jQuery/JavaScript执行append后如何按ItemId对表格排序

实现方法 #

你可以在append操作完成后，手动提取表格所有行按ItemId排序后重新插入表格，原生JS实现逻辑如下：

小提示：你的代码里给每行的ItemId列都设置了相同的idItemIdEdit，同一个页面内id重复会导致DOM选择异常，建议把id改为class属性，后续取值用类选择器即可。

1. 首先定义通用的表格排序函数：

function sortTableByItemId() {
  // 取表格的tbody容器（如果你的行直接放在table下没有tbody，直接取tblItemList即可）
  const tbody = tblItemList.querySelector('tbody') || tblItemList;
  // 把所有行转成数组方便排序
  const rowList = Array.from(tbody.querySelectorAll('tr'));

  // 按ItemId升序排序
  rowList.sort((rowA, rowB) => {
    // 读取每行存储的ItemId，转为数字后比较
    const itemIdA = Number(rowA.querySelector('.ItemIdEdit').textContent.trim());
    const itemIdB = Number(rowB.querySelector('.ItemIdEdit').textContent.trim());
    return itemIdA - itemIdB;
    // 如果需要降序排序，改为 return itemIdB - itemIdA 即可
  });

  // 清空原有行，插入排序后的行
  tbody.innerHTML = '';
  rowList.forEach(row => tbody.appendChild(row));
}

2. 在你原有追加行的代码后调用该函数即可：

tblItemList.append(ItemList);
// 追加完成后执行排序
sortTableByItemId();

如果你需要支持按其他列（比如你截图里的高亮列）排序，只需要修改sort方法里的取值逻辑即可：字符串类型的字段可以用localeCompare比较，数字类型的字段转成数字后做差比较即可。
如果需要更复杂的功能（比如点击表头切换排序列、排序方向），可以直接用成熟的前端表格组件，初始化后会自动支持动态数据的排序需求，不需要手动写排序逻辑。

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