实现表排序器后保留自定义添加的行类答案

【问题标题】：Retain custom added row class after tablesorter implemented实现表排序器后保留自定义添加的行类
【发布时间】：2014-05-31 07:48:10
【问题描述】：

我对 tablesorter 插件和 zebra 小部件选项 zebra 有疑问：["even", "odd"]

我已经为下面的 html 表格实现了表格排序插件

<table class="table table-striped table-condensed static_table_sorter">
  <tr class="warning">
    <td>Col 1</td>
  </tr>
  <tr>
    <td>Col 1</td>
  </tr> 
  <tr class="warning">
    <td>Col 1</td>
  </tr>
</table>

tablesorter 的 jQuery 是

$('.static_table_sorter').tablesorter({
  // enable debug mode 
  debug: false,
  theme: 'bootstrap',
  widthFixed: true,
  headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
  widgets : [ "uitheme", "filter_checkbox", "zebra","stickyHeaders"],
  widgetOptions : {
    // using the default zebra striping class name, so it actually isn't included in the theme variable above
    // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
    zebra : ["even", "odd"],
});

等页面加载斑马类偶数和奇数附加到 html 表行自定义类警告。所以我无法得到确切的结果。有人可以帮助我们在出现类警告时如何删除行上的奇偶类

【问题讨论】：

看起来您缺少 widgetOptions 的右括号

标签： jquery

【解决方案1】：

如果无法从 tablesorter 初始化中弄清楚如何做，您总是可以这样做：

$('.static_table_sorter > .warning').removeClass('even odd');

在您发布的函数调用之后。

或者，根本不要使用zebra,even/odd，而是使用引导程序的table-striped 类。（如果您不编辑 sass/less 则在引导后添加此 css）：

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
 /* css for odd */
}

bootstrap 不会修改偶数行，但你可以这样做

.table-striped>tbody>tr:nth-child(even)>td, 
.table-striped>tbody>tr:nth-child(even)>th {
 /* css for even */
}

【讨论】：

但是如果不使用斑马的方式，那么在过滤器上，备用行将具有相同的颜色
即使是table-striped?你确定吗？

【解决方案2】：

我个人会使用 CSS 解决这个问题。

假设你有类似的东西：

.warning { background-color: red; }

我会更新它以防止偶数/奇数像这样妨碍

.warning,
.warning.odd,
.warning.even {
    background-color: red;
}

【讨论】：