jQuery tablesorter 2.0 斑马小部件在排序时破坏了我的 CSS 样式

Question

我有一些 php 确定变量的值，它主要检查 0、1 或 2。如果是 1，它会向我的行添加一个 css 类。

遗憾的是，我注意到一个小错误，如果启用了斑马小部件，该错误会重置此样式，并且我对结果进行了排序。我真的不能用 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 代码就可以工作。

明显的重要警告是 nth-child() 不受 IE8 和更早版本的支持。

为此，您确实需要一个 Javascript 解决方案，但我建议使用一个可以帮助 IE 识别此选择器的解决方案，而不是一个可以完成所有事情的 javascript 解决方案。

IE 有两种 JS 解决方案，可以帮助它支持额外的 CSS 选择器:

• > Selectivizr
• > Dean Edwards' IE7.js

其中任何一个都将允许 IE 使用上述 CSS 代码。 Selectivzr 更现代，更专注于 CSS 选择器。 IE7.js 是一个较旧的脚本，它试图做更多的事情。我建议将 Selectivzr 用作首选，因为众所周知它可以与 jQuery 一起很好地工作，但您可能会被 IE7.js 的一些其他功能所吸引，因此值得一试。

希望对您有所帮助。