Question

我对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"],
});

所以在页面加载斑马类甚至＆amp;奇数附加到html表行自定义类警告。所以我无法得到确切的结果。有人可以帮助我们如何删除奇数和＆amp;在有课程警告的情况下甚至在行上课

Answer 1

如果没有弄清楚如何从tablesorter初始化中做到这一点，你总是可以这样做：

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

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

或者，不要使用zebra，偶数/奇数，而是使用bootstrap的table-striped类。（如果你没有编辑sass / less，那么在bootstrap之后添加这个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 */
}

Answer 2

我个人会用CSS修复此问题。

假设你有类似的东西：

.warning { background-color: red; }

我会更新它以防止偶数/奇怪的方式像这样

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

在实现tablesorter之后保留自定义添加的行类

2 个答案: