Una mejor manera de determinar incluso/filas impares en la tabla

Question

Digamos que usted tiene una página web con código de ejemplo siguiente:

<tr class="even"> 
    <td>something1</td> 
    <td colspan="1">somthing1.1</td> 
</tr> 


<tr class="odd"> 
    <td>something2</td> 
    <td><b>something2.1</b></td> 
</tr> 

<tr class="even"> 
    <td>something3</td> 
    <td><b>something3.1</b></td> 
</tr> 

Estos no están en un bucle por lo que tengo que decir explícitamente 'incluso' 'extraño'. Más adelante, si decidimos agregar una nueva fila entre algo2 y algo3, entonces necesitamos cambiar 'incluso' 'impar' para el resto de las filas también.

¿Hay forma de hacerlo en css automáticamente en IE6?

Actualmente este es mi código CSS para incluso

.headerTable tr.even { 
    font-weight : bold; 
    font-size : 9pt; 
    font-family : Arial,Helvetica,sans-serif,Verdana,Geneva; 
    background-color: #FFFFFF; 
    height: 20px; 
    color: #000000; 
} 

que ya tenía jQuery

Answer 1

Prueba jQuery. A continuación, puede hacer esto:

$("#myTable tbody tr:visible:even",this).addClass("even"); 
    $("#myTable tbody tr:visible:odd",this).addClass("odd"); 

El "Visible" selector no es realmente necesario, pero cuando se filtra una mesa haciendo algunas filas ocultas, el método seguirá funcionando correctamente.

Answer 2

par/impar niño de Uso jQuery implementation

Answer 3

Sí. Puede usar JavaScript para ejecutar estos elementos y restablecer sus clases de acuerdo con par/impar.

Answer 4

El mejor enfoque sería el :nth-child() pseudo-class.

Pero desafortunadamente aún no es ampliamente compatible. Entonces probablemente necesites usar JavaScript para hacer eso.

Answer 5

La forma de hacerlo sería usar las reglas n-child (par) y (impar). Desafortunadamente, y esto no debería ser una sorpresa, IE6 no es compatible con esto. Por lo que tiene algunas opciones:

A) el uso de JavaScript, con el inconveniente evidente de que no funcione para las personas con JS discapacitados:

var rows = document.getElementById('mytable').getElementsByTagName('tr'); 
for(var x = 0; x < rows.length; x++) { 
    rows[x].className = (x % 2 == 0) ? 'even' : 'odd'; 
} 

Si va a necesitar el comportamiento del cliente más dinámico en su solicitud , podría verificar una biblioteca como jQuery. Para solo este es innecesario, pero hace que trabajar con Javascript en todos los navegadores sea muy fácil. Haría lo anterior con jQuery como se muestra en esta respuesta.

Según su público, Javascript puede ser perfectamente aceptable. Si no es así, entonces quizás puedas ...

B) Simplifica tu CSS y sigue haciéndolo manualmente. Solo puede marcar las filas impares con una clase y luego hacer que el estilo predeterminado de la fila sea el estilo uniforme. Esto te ahorrará algo de trabajo cuando muevas las cosas.

C) Genere las filas mediante programación. Es realmente arcaico ingresar datos así en una tabla fija si va a actualizarlo con la suficiente frecuencia como para que esto sea un problema. Obviamente soy ajeno a su circunstancia, pero debería ser trivial hacerlo de alguna manera con un lenguaje simple como PHP.

D) Deje de usar un navegador realmente desactualizado. :) (Esto es medio en broma, estoy seguro que está fuera de tu control)