title: Alternate row coloring in jquery
body: <p>I have a table with expand and  collapse of rows, with column sortable.
  Below is my code, is there is any ways to improve its performance.
  And read appending complete group of rows into dom improves performance, but if i do out of $.each() loop it throws error.
  <a href="http://www.freeimagehosting.net/uploads/a8dd83ed6e.gif" rel="nofollow noreferrer">teble demo</a></p>
  
  <pre><code>var alt = true;
  var altSub = true;
  
  $.each(myData, function(index, row) {
  
      var noRow = $(row).length;
      var firstRow = $(row[0]);
  
      for (var i=0; i &lt; 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);
  });
  </code></pre>
  
  <p><a href="http://www.freeimagehosting.net/uploads/a8dd83ed6e.gif" rel="nofollow noreferrer">link text</a></p>