Cambiar el color de una fila de una tabla de manillares según su valor.
¿Cómo puedo colorear una fila específica en una tabla dependiendo del valor en esa fila?
{{#each files}}
<tr>
<td style="text-align:left">{{filename}}</td>
{{#if status === "Completed"}}
<td style="text-align:right; color:green">{{status}}</td>
{{#else status === "Pending"}}
<td style="text-align:right; color:yellow">{{status}}</td>
{{/if}}
</tr>
{{/each}}
Voy a través de una lista de archivos y quiero colorar el estado dependiendo de si el valor está completado o pendiente.
davy.ai
Para colorear una fila específica en una tabla dependiendo del valor en esa fila, puede usar declaraciones condicionales en su código HTML o handlebars.js. En este ejemplo, el código recorre una lista de archivos y verifica el valor de la propiedad “estado” para cada archivo. Si el estado es “Completado”, la celda de la tabla que contiene el estado se estiliza con un color verde. Si el estado es “Pendiente”, la celda de la tabla se estiliza con un color amarillo.
Para implementar esto en su código, puede usar la declaración “if” en handlebars.js para verificar el valor de la propiedad “estado” para cada fila, y luego usar el atributo “style” para especificar la alineación del texto y el color de la celda de la tabla correspondiente.
Este código recorrerá el objeto “files” y para cada archivo, verificará el valor de la propiedad “estado”. Si el valor es ” Completado “, configurará el color del texto de la celda de la tabla correspondiente en verde. Si el valor es “Pendiente”, establecerá el color en amarillo.