Colore della riga della tabella alternata, ma con 2 righe di dati

Question

Ho la mia impostazione tabella per lo striping Zebra, ma come faccio a rendere il colore della riga alternato per 2 righe anziché una singola riga?

mio markup dei dati si presenta così:

<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> 

Sto usando questo per tracciare linee in esso:

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

Answer 1

perché non provare nth-child? Qui ci sono un sacco di varianti qui. How nth-child works. Sono sicuro che puoi usare lo pseudo: al passaggio del mouse .mouseover in javascript.

Answer 2

Qualcosa del genere dovrebbe funzionare:

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

Answer 3

Provare a utilizzare .filter e ottenere il index() % 3 o (($(this).index()+1) % 3 == 0). Vedere codice qui sotto,

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'); 
}); 

Answer 4

Usa jquerys n-esimo figlio in questo modo:

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

Answer 5

Ci dovrebbe essere un modo in CSS per fare questo, ma se si vuole jQuery provare questo 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; 
}​ 

Answer 6

Per fare striping ogni due righe:

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