No se aconseja mezclar en un mismo flujo código PHP / Javascript. Porque PHP trabaja del lado del servidor y Javascript del lado del cliente. Cuando necesites una comunicación fluida entre cliente y servidor puedes usar Ajax, o la nueva API Fetch de Javascript. Pero no es lo que necesitas aquí.
Para resolver el problema que se plantea en tu pregunta puedes poner una clase .css
en el elemento, según el valor y luego aplicar el color en la hoja de estilo. Además es la práctica recomendada, porque el código queda más limpio, es más fácil de mantener y puedes reutilizar esa hoja de estilo en todo tu proyecto, dando uniformidad.
La clave de todo está en esta línea:
$color=$usuario['reposicion'] == 0 ? 'red' : 'black';
Lo que ocurre aquí es que mediante un operador ternario, verificamos el valor de $usuario['reposicion']
. Si es igual a 0
el valor de $color
será red
, de lo contrario será black
.
Luego, en el código PHP crearemos un <span class="$color">
que tomará red
o black
según el caso y la regla .css
se encargará de aplicar el color. En el .css
aprovechamos también para poner una regla llamada row-center
para centrar las filas, y quitamos el style
que aplicas directamente sobre los elementos, lo cual se considera una mala práctica por lo dicho antes. Es mejor separar responsabilidades, delegando la presentación a una hoja de estilo.
Con esto quedaría resuelto el problema de una manera satisfactoria. Aún así, si los valores son cambiados por el usuario (en el cliente), y se requiriera una actualización dinámica, también se podría hacer. En este caso se haría desde Javascript, escuchando ese cambio y asignado al elemento una clase diferente. O sea, algo parecido a lo que hacemos en PHP, pero del lado del cliente, y usando siempre la misma hoja de estilo. Pero esto no aplica para este caso, porque no estamos hablando de elementos editables.
Dejando eso de lado, veamos un ejemplo de cómo habría que organizar el código.
.css
En primer lugar, tendrías que crear un archivo de estilo con las siguientes reglas y poner ese archivo en la cabecera del contenido html que se genera:
.red {
color: #ee2500
}
.black {
color: #333
}
.row-center {
text-align: center
}
Como ya se dijo, en este archivo puedes poner todas tus reglas de estilo, quitándolas de los elementos, así no tienes reglas esparcidas por todo el código, sino centralizadas en un solo archivo.
PHP
En PHP introduciremos algunas mejoras que den claridad y simplicidad al código usando sprintf()
, es algo parecido a implementar plantillas. De paso evitaremos ids repetidos en los elementos, lo cual es otra mala práctica que puede llevar a errores si se usara en un futuro getElementById
del lado del cliente, para tomar decisiones importantes en base al ID de los elementos.
<table>
<thead>
<th>id</th>
<th>No. Devolucion</th>
<th>Reposicion</th>
</thead>
<tbody>
<?php
#AQUÍ EL CÓDIGO QUE DEFINE $rol_user Y DEMÁS ...
if($rol_user==='admin' || $rol_user==='administrativo'){
$td='<td>%s</td>';
$anchor='<a id="enlace%s" href="repo.php?repos=%s"><span class="%s">%s</span></a>';
$rows='';
foreach($usuarios as $usuario) {
$rows.='<tr class="row-center">';
$rows.=sprintf($td,$usuario['id']);
$rows.=sprintf($td,$usuario['Devolucion']);
$color=$usuario['reposicion'] == 0 ? 'red' : 'black';
$a=sprintf($anchor,$usuario['id'],$usuario['reposicion'],$color,$usuario['reposicion']);
$rows.=sprintf($td,$a);
$rows.='</tr>';
}
echo $rows;
}
#AQUÍ LO QUE SIGUE DE TU CÓDIGO
?>
</tbody>
</table>
El código creará las filas como se puede ver en el snippet siguiente. Si observas el valor de la fila 2 está en rojo, porque es 0
, todos los demás valores están en negro.
.red {
color: #ee2500
}
.black {
color: #333
}
.row-center {
text-align: center
}
<table>
<thead>
<th>id</th>
<th>No. Devolucion</th>
<th>Reposicion</th>
</thead>
<tbody>
<tr class="row-center">
<td>1</td>
<td>Devolución 1</td>
<td><a id="enlace1" href="repo.php?repos=1"><span class="black">1</span></a></td>
</tr>
<tr class="row-center">
<td>2</td>
<td>Devolución 2</td>
<td><a id="enlace2" href="repo.php?repos=0"><span class="red">0</span></a></td>
</tr>
<tr class="row-center">
<td>3</td>
<td>Devolución 3</td>
<td><a id="enlace3" href="repo.php?repos=3"><span class="black">3</span></a></td>
</tr>
</tbody>
</table>