Tengo una tabla que se rellena a partir de una consulta mediante PDO. Una de las columnas (BANDERA_CERRADA) que devuelvo de la consulta es lo que impulsa el cambio de color. Lo que debo hacer es cambiar el color de fondo de un basado en el valor de la columna. El valor puede ser 'Y', 'N' o vacío. A continuación se muestra un fragmento de la tabla (dejé fuera la fila del encabezado) y lo que he intentado hasta ahora. No pensé que esto funcionaría, pero es todo lo que podía pensar en este momento. No me opongo a Javascript, simplemente no podía pensar en cómo manipular el dom de una manera para lograr lo que necesito. cualquier ayuda es apreciada! gracias de antemano.
<tbody> <tr data-flag=<?php $sub_data['FLAG_CLOSED']?>> //also tried putting quotes around the php <td><?php echo ($sub_data['SEQ'])?></td> <td><?php echo ($sub_data['PART'])?></td> <td><?php echo ($sub_data['LMO'])?></td> <td><?php echo ($sub_data['UM'])?></td> <td><?php echo ($sub_data['HOURS_ESTIMATED'])?></td> <td><?php echo ($sub_data['HOURS_ACTUAL'])?></td> <td><?php echo ($sub_data['DATE_START'])?></td> </tr> </tbody>CSS:
tr [data-flag="Y"]{ background-color: green; } tr [data-flag="N"]{ background-color: red; }Tabla: Ejemplo de tabla con datos
Creo que necesitas tener las comillas alrededor del php en la etiqueta tr
Cambia el CSS a:
tr[data-flag="Y"]{ background-color: green; } tr[data-flag="N"]{ background-color: red; }Observe que no hay un espacio entre la etiqueta y el selector de datos.
Establecí una ID en el TR y luego apunté a la ID en CSS: HTML:
<tr id="<?php echo $sub_data['FLAG_CLOSED'];?>"> // evals to Y, N, or emptyCSS:
#Y{background-color: green;}En cuanto al código que ha publicado, el problema es de renderizado y no de CSS.
Tienes dos errores tipográficos en lo que has publicado.
Primero, en su HTML, necesita envolver su <tbody> en una etiqueta <table> (lo que supongo que está haciendo, pero no lo incluí aquí por razones de claridad, lo cual está bien). En segundo lugar, el espacio entre su selectores en su CSS en su pregunta inicial era incorrecta.
CSS se preocupa por los espacios en blanco, y el selector viene como un modificador de su búsqueda inicial.
tr[data-flag="Y"] { background-color: green; } tr[data-flag="N"] td { background-color: red; } Esto funcionará porque el filtro (la parte entre paréntesis) del tr sabe que se aplica a su elemento tr . De lo contrario, escribirlo como tr [] eliminará esa lógica. Estabas en el camino correcto inicialmente, pero tenías un problema de espacio en blanco cobarde. Su método de identificación (tal como se publicó en su respuesta) no funcionará tan bien si tiene múltiples filas seleccionadas yes o no , ya que se supone que las identificaciones son únicas.