jQuery tablesorter 2.0 zebra小部件在排序时会破坏我的CSS样式

Question

我有一些php确定变量的值，它实际上检查是看0,1还是2.如果它是1，它会在我的行中添加一个css类。

可悲的是，我注意到一个小错误，如果启用了zebra小部件，则会重置此样式，并对结果进行排序。我不能用css3来设置我的表格，因为它在排序时会变得混乱吗？

其他人有这个问题，设置！important;我的自定义CSS类不起作用

我是否应该使用！important包含我的CSS类;最后还是什么？

Answer 1

最好的答案是将Javascript解决方案放到此处，因为纯CSS可以使用:nth-child()选择器完成斑马条纹：

tr:nth-child(odd) {
  background-color: #FFFFFF;
}

tr:nth-child(even) {
  background-color: #CCCCCC;
}

通过上述内容，您无需在表行中添加1和2类，并且浏览器会在表格排序时自动选取正确的样式行，而不需要您不得不做任何其他事情。它的工作原理完全没有任何javascript代码。

显而易见的一点是，IE8及更早版本不支持nth-child()。

为此，你做需要一个Javascript解决方案，但我建议使用一个帮助IE识别这个选择器，而不是一个完成整个事情的javascript解决方案。

有两种针对IE的JS解决方案，它有助于支持其他CSS选择器：

• Selectivizr
• Dean Edwards' IE7.js

其中任何一个都允许IE使用上面的CSS代码。 Selectivzr更现代，更专注于CSS选择器。 IE7.js是一个较旧的脚本，它试图做更多的事情。我建议使用Selectivzr作为首选，因为它已经与jQuery一起使用，但你可能会被IE7.js的其他一些东西所诱惑，所以值得尝试一下。

希望有所帮助。