¿Cuál es la mejor manera de diseñar filas alternas en una tabla?

Question

Obviamente, el estilo real de las filas pares / impares se realizará a través de una clase CSS, pero ¿cuál es la mejor manera de " adjuntar " la clase a las filas? ¿Es mejor ponerlo en el marcado, o es mejor hacerlo a través del javascript del lado del cliente? ¿Cuál es mejor y por qué?

En aras de la simplicidad, supongamos que se trata de una tabla grande, de 100 filas, y que el esquema de color alterna filas impares / pares. Además, se necesita algún tipo de biblioteca de JavaScript que pueda hacer esto fácilmente en otra parte de la página, por lo que la sobrecarga de ese paquete no es un factor.

---

El objetivo real de esta pregunta es determinar qué compensaciones están involucradas y cómo se deben manejar esas compensaciones, como los resultados de rendimiento en el servidor si la página se encuentra bajo carga (suponga una tabla dinámica) , hits de ancho de banda para usuarios con velocidades de conexión más bajas, hits semánticos al agregar código de diseño adicional al HTML (La idea aquí es que HTML es para contenido, CSS es para diseño y javascript es para cómo se comporta el contenido, así como controlar / aumentar el diseño)

Answer 1

Puede hacerlo con bastante facilidad con jQuery, así:

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

Puede calificar el selector un poco más si solo quiere hacer esto en una tabla en particular, o hacerlo también en elementos 'li'.

Creo que esto es un poco más limpio y más legible del lado del cliente de lo que sería en algunos entornos del lado del servidor,

Answer 2

Lo pondría en el marcado (lado del servidor). El servidor tarda menos de un milisegundo en completar rowNum = (rowNum - 1) * -1 Es una molestia mía cuando un sitio web es lento debido a la cantidad de JavaScript que se está ejecutando.

Answer 3

Como se dijo en las otras respuestas, hacerlo en una tabla grande en el lado del cliente será más lento que en el lado del servidor, y puede no funcionar si el usuario tiene JavaScript deshabilitado.

Sin embargo, el uso de un marco JS como jQuery hace que sea tan fácil que sea realmente tentador:

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

Answer 4

Para una tabla de un tamaño tan grande, haría el procesamiento de la fila en el lado del servidor, usando PHP o similar para calcular los nombres de clase par / impar para cada fila. Esta solución funcionará para aquellos con JavaScript desactivado y tendrá un rendimiento mucho mayor que cualquier biblioteca de JavaScript que procese un elemento de tabla de este tamaño.

En PHP, la lógica se vería algo así como

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

Si no puede realizar ningún procesamiento del lado del servidor, recomendaría que JavaScript establezca las etiquetas de clase para cada fila en lugar de manipular los estilos directamente. De esta forma, la presentación se deja al CSS y el comportamiento se deja al JavaScript y si cambia la forma en que se generan las clases en una fecha posterior, el código de presentación seguirá siendo el mismo.

Answer 5

Yo haría esto inicialmente del lado del servidor ya que el cliente puede no tener javascript habilitado. Si está agregando / eliminando filas del lado del cliente con javascript, es posible que también desee tener la capacidad de hacerlo en el cliente después de que se haya completado el evento agregar / eliminar. En la medida de lo posible, debe intentar que su interfaz se comporte bien sin Javascript, a menos que pueda controlar el entorno del navegador (por ejemplo, en una aplicación de intranet donde puede requerir que esté habilitada).

Answer 6

Algún día, podremos usar CSS puro . Por supuesto, esta parte de la especificación CSS se introdujo en 2001 y todavía no es compatible. = (

Answer 7

Lo que estás tratando de lograr incluso se puede hacer con CSS3:

tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }

Esto también aparece en la especificación de selectores css3 del w3 . Si está buscando compatibilidad, agregar la clase del lado del servidor o mediante javascript sería una solución mucho mejor.

Answer 8

Depende de su escenario. La implementación basada en JavaScript puede ser más rápida de implementar para varias filas si la tabla no se crea sobre la marcha. Sin embargo, si está creando dinámicamente su tabla, puede configurar fácilmente la clase para que cada otra fila sea " row_alternate " - Prefiero el método del lado del servidor si le preocupa que algunos de sus usuarios no tengan JavaScript.

Answer 9

Si está utilizando cualquier tipo de marco, esta suele ser una de las primeras características que incluyen.

De lo contrario, busqué en Google "jscript table alternating colors" y obtuve varias docenas de enlaces a técnicas.

(Aparte: es una lástima que los desarrolladores nunca obtengan crédito por el código que no escribieron).

Answer 10

Siempre aplico la clase en el lado del servidor a medida que se transmiten / agregan a la página, pero si tiene un reordenamiento del lado del cliente, las filas deberán volver a clasificarse.

Answer 11

Encontré un buen sitio que explica lo que quieres lograr con jquery:

Aquí está el resultado final http://15daysofjquery.com/examples/zebra/code/demoFinal.php

Y aquí está el tutorial http://15daysofjquery.com/examples/zebra/

Answer 12

Yo diría realmente que depende de la situación. Si está recorriendo los datos para crear las filas en el lado del servidor, probablemente diría que debería hacerlo allí.

Esto se vuelve mucho más complicado si va a comenzar a usar el script del lado del cliente para ordenar / reordenar las filas. En este caso, si son 100 filas más o menos, podría inclinarme a hacerlo en el lado del cliente del evento de carga, porque al menos de esa manera no está duplicando el código para determinar el color de la fila. Lo admito, realmente depende de la velocidad en este caso. Probablemente lo probaría y vería si el rendimiento es aceptable antes de tomar una decisión final.