2009-06-11 13 views
6

Tengo una tabla con expandir y colapsar filas, con columna ordenable. A continuación está mi código, ¿hay alguna forma de mejorar su rendimiento? Y leer el agregado del grupo completo de filas en dom mejora el rendimiento, pero si lo hago fuera del bucle $ .each() arroja un error. teble demoColoración de fila alternativa en jquery

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

+0

favor, proporcionan una demostración más grande de su tabla – Natrium

+1

y por qué es un wiki de la comunidad? Es una buena pregunta perfecta. – Natrium

+0

@Natrium - He actualizado la imagen. – vinay

Respuesta

2

Tutorials:Zebra Striping Made Easy del jQuery es un gran tutorial sobre cómo hacer las rayas de cebra.

+0

esta franja de cebra será aplicable en mi caso. Si miras esa imagen de demostración, te da una idea. Mi tabla se colapsó y se expandió, debido a que tiene color en el grupo. – vinay

+0

Una vez escuché a alguien llamándolo "striping de pijamas" :-) – Natrium

+0

Me acordé de la cita de Hitchikers 'Guide to the Galaxy' Oh, eso fue fácil ', dice Man, y para un bis continúa demostrando que el negro es blanco y obtiene mismo asesinado en el próximo paso de cebra. " –

15

Puede encontrar los selectores :even y :odd útiles.

A continuación, podría utilizar como esto:

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

La otra cosa a considerar es si se puede obtener el estilo diferente de las subsecciones solo con CSS, a continuación, en su JS sólo tendrá que preocuparse por la aplicación de las clases par/impar. El CSS podría ser algo como:

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

Gracias por su respuesta, pero no funciona correctamente. se parece a esto http://www.freeimagehosting.net/uploads/da55af5e55.gif – vinay

+1

Supongo que tiene algunas filas ocultas que están causando que las líneas se vean mal. Pero sin ver su fuente, es difícil ver lo que está causando eso. Usar el selector visible cuando está aplicando el trazado de líneas puede ayudar. – thatismatt

+1

Aquí hay un código que con suerte ilustrará mi punto: http://jsbin.com/iwuqe – thatismatt

0

está dentro de cada bucle, hacer esto:

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

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