> Faqs > Cómo cambiar color de filas en una tabla

Cómo cambiar color de filas en una tabla

Necesito cambiar el color de las filas de una tabla segun el estado, el cual esta almacenado en una bbdd

ejemplo: si la venta esta activa, el color de la fila debe pasar a verde. pero si esta en espera debe estar en amarillo, si esta caida a negro, en verificacion a purpura

Cuando se muestre en pantalla debe colorear la fila segun su estado y cambiar de color si se le cambia el estado.

Este codigo deberia hacerse el ajax por lo que veo pero no consigo una sintaxis para hacerlo. ¿alguien me puede falilitar un codigo para ver como va la sintaxis?

Respuestas

Detrás de tu pregunta se esconde una complejidad variable, dependiendo de cómo quieras encarar el problema.

El cambiar los colores de una fila con respecto al estado en principio es sencillo.

Simplemente, en la programación del lado del servidor y el acceso a la base de datos, detectando uno u otro estado, le puedes poner una clase determinada a la fila. Si fuera en PHP sería algo como esto:

<tr class="<?= $registro["estado"] ?>">
    <td>Esta fila...</td>
</tr>

Ahora bien, comentas el tema del Ajax y aquí ya la cosa cambia, porque entonces el comportamiento te lo tienes que llevar al cliente, con Javascript.

Para hacer Ajax tienes diversas posibilidades. Puedes aprender más en la sección de Ajax, porque es imposible dar una solución en una respuesta así, que pueda encajar perfectamente con tu problema, lo ideal es que aprendas a hacerlo tú.

Lo que sí quiería comentar es que Ajax te soluciona un caso: que tengas que cambiar el color de la fila como consecuencia a una acción del usuario que está usando la página. Es decir, imaginemos que el usuario cambia el estado de un producto y ahora pasa a "indisponible" y por tanto la fila tiene que cambiar a color rojo. Entonces al recibir la respuesta del servidor, advirtiendo que el producto pasa a "indisponible", con Javascript le cambias el color (Básicamente sería cambiar la clase de css de ese elemento, no es nada del otro mundo). Este escenario te lo soluciona Ajax perfectamente. Yo te recomenaría ir por jQuery si no quieres invertir mucho tiempo en aprender o mejor usar web components con LitElement para crear componentes capaces de encapsular la complejidad de todo el flujo de cambios e interacción con el usuario, y ser más reutilizables.

Pero si el escenario es otro, como que el estado del producto cambie automáticamente por las acciones de otros usuarios, sin que intervena una acción del usuario que tiene la página abierta. Por ejemplo, tengo un conjunto de plazas de aparcamiento que están llenas o vacías. Entra un coche en una de las plazas y en mi aplicación se produce un cambio en la base de datos. Automáticamente la página web abierta tiene que reaccionar a este cambio, cambiando el color de una fila. Esto se llama programación en tiempo real y lo soluciones por sockets. Es algo más complejo, pero también asumible e incluso sencillo si usas cosas como Pusher o Firebase. O bien programación en tiempo real con frameworks como Laravel o Meteor.

Espero haberte ayudado un poco.

Miguel Angel
3295 146 215 17