如何用jQuery/JavaScript排序表格，聚合相同文本<td>行以实现rowspan？

没问题！我来给你分享两种实用的实现方案，不管用原生JavaScript还是jQuery，都能轻松把表格里同一列内容相同的行集中排列，正好为后续合并rowspan单元格做好准备。

方案一：原生JavaScript实现 #

这种方案不需要依赖任何库，兼容性拉满：

// 首先获取目标表格（请根据实际修改表格的id）
const targetTable = document.getElementById('sortTable');
// 兼容表格有没有tbody两种情况
const tableBody = targetTable.querySelector('tbody') || targetTable;
// 把所有行转换成数组，方便排序操作
const tableRows = Array.from(tableBody.querySelectorAll('tr'));

// 自定义排序规则：按第二列（索引为1，列从0开始计数）的文本内容排序
tableRows.sort((rowA, rowB) => {
  // 提取单元格文本并去除首尾空格，避免空格干扰排序
  const contentA = rowA.cells[1].textContent.trim();
  const contentB = rowB.cells[1].textContent.trim();
  // 使用localeCompare做自然语言排序，比直接字符串比较更准确
  return contentA.localeCompare(contentB);
});

// 清空原表格内容，重新插入排序后的行
tableBody.innerHTML = '';
tableRows.forEach(row => tableBody.appendChild(row));

方案二：jQuery实现 #

如果你的项目已经引入了jQuery，代码会更简洁：

// 同样请根据实际修改表格id和目标列索引
$('#sortTable tbody tr').sort((rowA, rowB) => {
  const contentA = $(rowA).find('td:eq(1)').text().trim();
  const contentB = $(rowB).find('td:eq(1)').text().trim();
  return contentA.localeCompare(contentB);
}).appendTo('#sortTable tbody');

关键注意事项 #

• 如果你要按其他列排序，只需要修改代码里的索引值（比如按第一列排序就把cells[1]改成cells[0]，jQuery里的:eq(1)改成:eq(0)）
• 一定要用trim()去除单元格文本的首尾空格，否则可能会出现看似内容相同但排序失败的情况
• 如果表格有表头<thead>，确保我们排序的是<tbody>里的行，不要误操作表头行

排序完成后，你就可以顺利进行rowspan合并的逻辑开发啦～

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