alternos colores de las filas cuando haya ROWSPAN

Question

que tienen este código HTML:

<table class="altRowTable"> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("table.altRow tr:odd").css("background-color", "#DEDFDE"); 
    }); 
</script> 

Esto funciona bien hasta que tenga algunas filas que contiene una rowspan (que no es consistente a través de las filas).

Así que tener algo como esto (por debajo "-" representa un espacio - no puede realmente hacer tablas en SOF :))

|---ID---|---name---|---Number---| 
|---1----|---joe----|-----1------| 
|--------|---tom----|-----2------| 
|---2----|---joe----|-----3------| 
|---3----|---joe----|-----4------| 
|---4----|---joe----|-----6------| 
|---5----|---joe----|-----5------| 
|--------|---tom----|-----3------| 

¿Cómo puedo guardar todas las filas dentro del rowspan el mismo color de fondo ?

Answer 1

Puede haber una manera más pulido para hacerlo, pero aquí hay un camino:

$("table.altRow tr").filter(function() { 
    return $(this).children().length == 3; 
}).filter(':even').addClass('alt'​​​​​​); 

$("tr.alt td[rowspan]").each(function() { 
    $(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('alt'); 
}); 

Este utiliza una clase CSS en lugar del color, como este:

.alt { background-color​: #DEDFDE; }​ 

You can give it a try here, puede intercambie :even y :odd en el primer bloque de código para hacer el patrón que desee (con el ejemplo, :odd no lo ilustra bien, ya que esas son las filas sinrowspan células).

Lo que esto hace es encontrar las filas con todas las celdas, no las filas parciales, obtienen las impares o pares de esas y aplica una clase. Luego, el segundo pase mira filas, y si tienen celdas rowspan="" obtiene .rowSpan (propiedad DOM), menos uno para la fila actual, y aplica la clase que muchas filas abajo, a través de .nextAll() y .slice().

Answer 2

La solución provista por @ nick-craver no funciona para las tablas con celdas que usan los atributos rowspan y colspan. El código modificado a continuación explica esto, aunque supone que el número total de etiquetas y sus valores de colspan son iguales para todas las filas.

Gracias por señalarme en la dirección correcta aunque @ nick-craver!

// This the maximum number of columns in your table, E.g. In this case a column crossing the whole table would have colspan="3" 
 

 
var column_count = 3; 
 

 
$("table.altRow tr").filter(function() { 
 

 
    // Adds row children and colspan values of those children 
 

 
    var child_count = 0; 
 
    $("td", this).each(function(index) { 
 
    if ($(this).attr('colspan') != null) { 
 
     child_count += parseInt($(this).attr('colspan')); 
 
    } else { 
 
     child_count += 1; 
 
    } 
 
    }); 
 

 
    return child_count == column_count; 
 
}).filter(':even').addClass('alt'); 
 

 
$("tr.alt td[rowspan]").each(function() { 
 
    $(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('alt'); 
 
});