JQuery中表的斑马条纹效果

Question

在这里查看代码

嗨，我是使用JQuery的新手，只了解一些基础知识，并且在弄清楚如何对表进行排序时如何将条纹保持在正确的位置上遇到困难。 乍一看它们似乎还不错，但单击标题中的其他所有内容后，表的颜色就会变质。

现在，我已经找到了该问题的一些答案，但是我的问题是我几乎不知道需要将代码放置在什么地方。 因此，我不知道最接近正确的代码是什么，因为我正在测试的网站的唯一响应似乎是我可以单击标题，但是表格仍然对颜色进行了排序（因此例如代码没有执行任何操作）或标头根本不响应。

该代码使用jQuery JavaScript Library v1.4.2，还使用Christian Bach的tablesorter 2.0插件。 我想我要做的是手动添加某种小部件，该小部件会将条纹重置为它们的第一次位置，或者使条纹在加载后保持不变。

我一直在做的添加代码的方法是制作一个新的脚本，例如：

由于某种原因，如果我在“脚本”之前添加<，则某些代码消失了

<script type="text/javascript" id="js">
  $(document).ready(function() {
  { 
    $("#myTable").tablesorter({ 
      widgets: ['zebra'] 
    }); 
  }); 
</script>

我曾尝试将其与其他脚本一起放在/ head中，但如果测试站点每次仅给出一些相同的响应，仍然很难分辨是正确的。 （我正在使用Firebug进行测试）我忘记了一些特定的东西吗？ 我不完全知道这段代码是否正确地引用了jQuery，但是我真的可以使用任何人的输入。

Answer 1

虽然一开始很难更改输出数据的方式（因为听起来您当前正在手动在HTML表中输出数据，然后使用Javascript对表进行动态排序），但从长远来看，一个完全不同的jQuery插件JQGrid 。

粗略地看，它看起来好像有一个自己的“插件”，该插件需要一个预先存在的表并将其转换为jqgrid，但我只使用过Jqgrid从头开始制作网格。

如果不确定，请查看他们的演示以了解实际操作。 我认为，一旦您看到jqgrid提供的功能，便会考虑让它为您完成繁重的工作。

Answer 2

斑马小部件默认情况下为样式添加“ odd”和“ even”类名称。 因此，只需更改widgetZebra选项以匹配您的CSS样式即可：

$("table").tablesorter({
    // sort on the first column and third column, order asc
    sortList: [[0,0],[0,1]], widgets: ['zebra'], widgetZebra: {css: ["alt",""]}
});