Question

嗨，我对使用JQuery非常陌生，只知道一些基础知识，而且我很难弄清楚当表格排序时如何将条纹保存在正确的位置。它们起初看起来很好，但是标题中的任何其他内容都会被点击，表格颜色会变成berzerk。

现在，我遇到了一些问题的答案，但我的问题是我很少知道需要放置代码的位置。所以我不知道什么代码最接近正确，因为我正在测试的网站的唯一响应似乎是我可以点击标题，但表格仍然按顺序排序颜色（所以它的像代码没有做任何事情）或标题根本没有响应。

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

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

由于某些原因，如果我添加一个＆lt;在“脚本”之前，一些代码消失了

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

我已尝试将其与其他脚本放在/ head中，但如果测试站点每次只提供一些相同的响应，那么仍然很难说出什么是正确的。（我正在使用萤火虫来测试）我有没有忘记的具体内容？我不知道这段代码是否正确引用回jQuery，但我真的可以使用任何人的输入。

Answer 1

虽然一开始很难改变输出数据的方式（因为它听起来你当前正在手动输出HTML表中的数据，然后使用Javascript动态地对表进行排序），但是长期使用不同的jQuery插件，JQGrid。

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

如果您不确定，请查看他们的demo以查看其效果。我想一旦你看到jqgrid提供的力量，你会考虑让它为你做繁重的工作。

Answer 2

默认情况下，zebra小部件会为样式添加“奇数”和“偶数”的类名。因此，只需更改widgetZebra选项以匹配您的CSS样式：

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

JQuery中表的斑马条带效应

2 个答案: