在使用tablesorter的html表格中，一行如何根据其单元格的内容具有背景颜色？

Question

我正在使用 jQuery Mottie 表排序器显示一个 HTML 表格。我希望其中一列中带有“v”的行使用某种（给定的）背景颜色进行格式化，该背景颜色在对表格进行排序后保留。如何才能实现这一目标？

    <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 style="background-color:#e6ffee;">
      <td>*</td>
      <td>Sandra</td>
      <td>v</td>
      <td>24</td>
    </tr>
    </tbody>
    </table>

背景颜色永远不会显示。我预计无论如何排序后它都是不正确的。

Answer 1

您可以尝试使用在docs中找到的表排序器事件中的构建。这里我绑定了一个

sortStart

和

sortEnd

事件。在重新着色之前，它会重置所有行的颜色。一旦表排序完毕，它就会循环遍历所有数据。如果其中一行等于“v”，则将该行着色为黑色。

$("#tablesorter_Table").tablesorter();
$("#tablesorter_Table")
        .bind("sortStart",function(e, table) {
          console.log("Header clicked");
          $("#tablesorter_Table tr").each(function(i, e) {
              $(e).css("background-color", "#000000");
          });
        })
        .bind("sortEnd",function(e, table) {
          $("#tablesorter_Table td").each(function(i, e) {
               if($(e).text() == "v")
                  $(e).parent().css("background-color", "#000000");
          });
        });