交替表行颜色,但有2行数据

我已经为Zebra条纹设置了表格,但是如何使行颜色交替为2行而不是单行呢?

我的数据标记如下所示:

 @task.TaskNum @task.RepiarTime Priority Club SD Commercial Reg Commercial After Hours   @task.Description.ToString()  

我用它来条纹化它:

  $(document).ready(function () { $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); }); $(".stripeMe tr:even").addClass("alt"); }); 

像这样的东西应该工作:

 $(".stripeMe tr").each(function(i){ if (i%4 < 2){ $(this).addClass("alt"); } }); 

要对每两行进行条带化:

 $('.stripeMe tr:nth-child(3n+3)').addClass('alt'); $('.stripeMe tr:nth-child(3n+4)').addClass('alt'); 

为什么不试试n-child? 这里有一堆变化。 nth-child是如何工作的。 我敢肯定你可以在javascript中使用伪:hover而不是.mouseover。

尝试使用.filter并获取index() % 3(($(this).index()+1) % 3 == 0) 。 见下面的代码,

DEMO

 $(document).ready (function () { $('#myTable tr').filter(function () { //or (($(this).index()+1) % 3 == 0) if you want 3rd row //to be highlighted first. return ($(this).index() % 3 == 0); }).addClass('alt'); }); 

CSS中应该有一种方法可以做到这一点,但如果你想要jQuery,请试试这个jsFiddle示例

jQuery的:

 var index = 0; $('tr').each(function() { $(this).addClass((index <= 1) ? 'odd' : 'even'); index++; if (index == 4) index = 0; });​ 

CSS:

 .odd { background: #999; } .even { background: #ddd; }​ 

像这样使用jquerys nth child:

 $(document).ready(function () { $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); }); $(".stripeMe tr:nth-child(3n)").addClass("alt"); // 3n selects every third element });