Colorazione riga alternativa in jquery

Question

Ho una tabella con espansione e compressione di righe, con colonna ordinabile. Di seguito è riportato il mio codice, ci sono modi per migliorarne le prestazioni. E leggere l'aggiunta di un gruppo completo di righe in dom migliora le prestazioni, ma se faccio fuori da $ .each() il ciclo genera un errore. teble demo

var alt = true; 
var altSub = true; 

$.each(myData, function(index, row) { 

    var noRow = $(row).length; 
    var firstRow = $(row[0]); 

    for (var i=0; i < noRow; i++) { 
     if(firstRow.attr('id') == $(row[i]).attr('id')) { 
      if(alt == true) { 
       firstRow.removeClass("odd").addClass("even"); 
       alt = !alt; 
       altSub = true; 
      } else if(alt == false) { 
       firstRow.removeClass("even").addClass("odd"); 
       alt = !alt; 
       altSub = true; 
      } 
     } else { 
      if(altSub == true) { 
       $(row[i]).removeClass("alt_row_sub").addClass("alt_row_sub2"); 
       altSub = !altSub; 
      } else if(altSub == false) { 
       $(row[i]).removeClass("alt_row_sub2").addClass("alt_row_sub"); 
       altSub = !altSub; 
      } 
     } 
    } 
    $table.children('tbody').append(row); 
}); 

link text

Answer 1

Tutorials:Zebra Striping Made Easy dal jQuery è un grande tutorial su come fare lo striping zebra.

Answer 2

È possibile trovare utili i selettori :even e :odd.

È quindi possibile utilizzarli in questo modo:

$('.stripyTable tr:even').addClass('even'); 
$('.stripyTable tr:odd').addClass('odd'); 
$('.stripyTable .submenu tr:even').addClass('alt_row_sub'); 
$('.stripyTable .submenu tr:odd').addClass('alt_row_sub2'); 

L'altra cosa da considerare è se è possibile ottenere il diverso stile delle sottosezioni solo con i CSS, quindi nel vostro JS avete solo bisogno di preoccuparsi di applicare le classi pari/dispari. Il CSS potrebbe essere simile:

.odd { background-color: blue; } 
.even { background-color: white; } 
.sub .odd { background-color: green; } 
.sub .even { background-color: yellow; } 

Answer 3

si è all'interno di ogni ciclo, fare questo:

$.each(myData, function(index, row) { 

     if(index % 2 == 0) 
     { 
      row.addClass("AltRow"); 
     } 
)};