jQuery Tablesorter点击列头时将该列红背景行置顶的实现方法

该需求完全可实现，通过Tablesorter内置的自定义排序能力即可完成，核心逻辑是排序时优先判断当前排序列对应单元格是否带有红色背景，将符合条件的行优先级设为最高，始终排在最顶部。

最优实现步骤（性能稳定、兼容性高） #

步骤1：统一红背景样式（可选但强烈推荐） #

建议给带红色背景的单元格统一加专属CSS类，避免直接判断背景色的浏览器兼容性问题：

.highlight-red {
  background-color: #ff7d7d;
}

你原有设置单元格红色背景的代码，同步改为添加highlight-red类即可。

步骤2：注册自定义排序解析器 #

// 注册全局排序解析器，所有列通用
$.tablesorter.addParser({
  id: 'redFirst',
  is: function() {
    // 不自动匹配列，手动指定生效范围
    return false;
  },
  format: function(cellText, table, cellDom, columnIndex) {
    // 有红背景的行优先级设为0，无红背景的优先级从1开始叠加原内容排序权重
    const hasRedBg = $(cellDom).hasClass('highlight-red');
    return hasRedBg ? 0 : (1 + $.tablesorter.formatFloat(cellText, table));
  },
  type: 'numeric'
});

步骤3：替换原有Tablesorter初始化代码 #

// 动态获取列数，给所有列应用红背景优先的排序规则
const columnCount = $('.tablesorter thead th').length;
const headersConfig = {};
for (let i = 0; i < columnCount; i++) {
  headersConfig[i] = { sorter: 'redFirst' };
}

$(".tablesorter").tablesorter({
  headers: headersConfig
});

特殊情况适配（不新增CSS类的场景） #

如果你不想新增CSS类，要直接判断背景色，只需要修改解析器的hasRedBg判断逻辑即可：

// 写一个工具方法兼容不同浏览器返回的背景色格式
const getBgHex = (el) => {
  const rgbVal = $(el).css('backgroundColor');
  if (rgbVal.startsWith('#')) return rgbVal.toLowerCase();
  const rgbMatch = rgbVal.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  if (!rgbMatch) return '';
  return '#' + rgbMatch.slice(1).map(num => parseInt(num).toString(16).padStart(2, '0')).join('').toLowerCase();
}

// 解析器内判断改为
const hasRedBg = getBgHex(cellDom) === '#ff7d7d';

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