2012-03-20 67 views
6

我有我的表設置爲斑馬條紋,但我如何完成使行顏色替代2行而不是單行?交替錶行顏色,但與2行數據

我的數據標記看起來是這樣的:

<tr> 
     <td>@task.TaskNum</td> 
      <td>@task.RepiarTime</td> 
      <td>Priority Club</td> 
      <td>SD</td> 
      <td>Commercial</td> 
      <td>Reg Commercial</td> 
      <td>After Hours</td> 
     </tr> 
     <tr><td colspan="7"> 
       @task.Description.ToString() 
      </td></tr> 

我使用這條帶是:

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

添加備用類你想要的風格的行。我懷疑你能夠依靠css規則。 – 2012-03-20 20:41:08

回答

1

爲什麼不試試第n個孩子?這裏有一些變化。 How nth-child works.我相信你可以在javascript中使用pseudo:hover而不是.mouseover。

6

像這樣的東西應該工作:

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

嘗試使用.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'); 
}); 
0

使用jquerys n個子像這樣:

$(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 
}); 
0

應該有CSS的方式來做到這一點,但如果你想的jQuery試試這個jsFiddle example

的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; 
}​ 
4

要做到每兩行進行條帶化:

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

我認爲你的意思是4n + 3和4n + 4? – PerryJ 2013-03-19 21:49:27

+1

隨着@ PerryJ的附錄,我認爲這是最簡單和最好的答案。謝謝! – 2013-09-06 20:26:06