如何用jQuery Mottie Tablesorter实现行按单元格内容着色并保留样式

要实现指定列含"v"的行高亮且排序后样式保留，核心思路是用CSS类替代行内样式，并通过Tablesorter的回调函数在表格更新（排序、过滤等）时重新应用高亮逻辑，具体步骤如下：

1. 定义高亮CSS类 #

先写一个CSS类，用!important确保优先级高于Tablesorter的默认行样式：

.highlight-row {
  background-color: #e6ffee !important;
}

2. 清理HTML代码 #

移除行内的style属性，保持结构干净：

<table id="tablesorter_Table" class="tablesorter">
<thead>
<tr>
  <th>Nw</th>
  <th>Atleet</th>
  <th>m/v</th>
  <th>Prestative</th>
</tr>
</thead>
<tbody>
<tr>
  <td></td>
  <td>Kees</td>
  <td>m</td>
  <td>274</td>
</tr>
<tr>
  <td>*</td>
  <td>Sandra</td>
  <td>v</td>
  <td>24</td>
</tr>
</tbody>
</table>

3. 初始化Tablesorter并添加高亮逻辑 #

在初始化时绑定sortEnd回调（排序完成触发），同时定义高亮函数，确保页面加载和每次排序后都能正确应用样式：

$(function() {
  // 初始化Tablesorter，可添加你的其他配置
  $("#tablesorter_Table").tablesorter({
    widgets: ['zebra'], // 可选，保留斑马纹效果
    sortEnd: function() {
      highlightTargetRows();
    }
  });

  // 高亮逻辑函数
  function highlightTargetRows() {
    // 先移除所有行的高亮类，避免重复叠加
    $("#tablesorter_Table tbody tr").removeClass("highlight-row");
    // 筛选第三列（索引2，从0开始计数）文本为"v"的行，添加高亮类
    $("#tablesorter_Table tbody tr").filter(function() {
      return $(this).find("td").eq(2).text().trim() === "v";
    }).addClass("highlight-row");
  }

  // 页面加载完成后首次执行高亮
  highlightTargetRows();
});

额外说明 #

• 如果你的表格还有过滤、分页等操作，可以把highlightTargetRows()也绑定到filterEnd、pagerComplete等事件，确保所有表格更新场景下样式都能正确应用。
• 使用.trim()是为了避免单元格内的空格导致匹配失败，确保判断准确。

内容的提问来源于stack exchange，提问作者Johan van Ooijen