Skip to main content
se añadieron 1501 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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í.

Esto lo puedesPara resolver de una forma más limpia, poniendoel 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. Eso lo haremosAdemá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:

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 es otrase considera una mala práctica por lo dicho antes. Es mejor separar responsabilidades, delegando la presentación a una hoja de estilo.

En casoCon esto quedaría resuelto el problema de queuna manera satisfactoria. Aún así, si los valores seanson cambiados por el usuario (en el cliente), y se requierarequiriera una actualización dinámica, también se puedepodría hacer. En este caso yase haría desde Javascript, escuchando ese cambio y asignado al elemento una clase diferente. No parece ser el casoO sea, algo parecido a lo que hacemos en PHP, pero de serlodel lado del cliente, usar una clase .css te servirá tambiény usando siempre la misma hoja de estilo. Pero esto no aplica para eseeste caso, porque no estamos hablando de usoelementos editables.

VeamosDejando eso de lado, veamos un ejemplo de cómo habría que organizar el código.

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:

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.

En PHP introduciremos algunas mejoras que den claridad y simplicidad al código usando sprintfsprintf(), 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 usaráusara en un futuro getElementById del lado del cliente, para tomar decisiones importantes en base al ID de los elementos.

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.

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.

Esto lo puedes resolver de una forma más limpia, poniendo una clase .css en el elemento, según el valor. Eso lo haremos en esta línea:

Luego, 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 es otra mala práctica.

En caso de que los valores sean cambiados por el usuario (en el cliente), y se requiera una actualización dinámica, también se puede hacer. En este caso ya desde Javascript, escuchando ese cambio y asignado al elemento una clase diferente. No parece ser el caso, pero de serlo, usar una clase .css te servirá también para ese caso de uso.

Veamos un ejemplo.

En primer lugar, tendrías que crear un archivo de estilo con las siguientes reglas:

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 usará en un futuro getElementById del lado del cliente.

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.

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:

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.

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:

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.

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.

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.

se añadieron 670 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Esto lo puedes resolver de una forma más limpia, poniendo una clase .css en el elemento, según el valor. Eso lo haremos en esta línea:

$color=$usuario['reposicion'] == 0 ? 'red' : 'black'; 

Luego, si lo quieres actualizar dinámicamentecrearemos 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, eny quitamos el style que aplicas directamente sobre los elementos, lo cual es otra mala práctica.

En caso de que los valores sean cambiados por el usuario (en el cliente), y se requiera una actualización dinámica, también puedes cambiar la clase del elementose puede hacer. En este caso ya desde Javascript, escuchando ese cambio y el color cambiaríaasignado al elemento una clase diferente. No parece ser el caso, pero de serlo, usar una clase .css te servirá también para ese caso de uso.

Veamos un ejemplo, resolviendo todo desde PHP usando una clase .css.


.css


PHP

Luego, enEn PHP, haces algo así (introduciremos 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 usará en un futuro getElementById del lado del cliente.

Código

<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>    

Esto lo puedes resolver de una forma más limpia, poniendo una clase .css en el elemento, según el valor.

Luego, si lo quieres actualizar dinámicamente, en caso de los valores sean cambiados por el usuario (en el cliente) también puedes cambiar la clase del elemento y el color cambiaría. No parece ser el caso, pero de serlo, usar una clase .css te servirá también para ese caso de uso.

Veamos un ejemplo, resolviendo todo desde PHP usando una clase .css.

Luego, en PHP, haces algo así (introduciremos algunas mejoras que den claridad y simplicidad al código usando sprintf.

Código

<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>    

Esto lo puedes resolver de una forma más limpia, poniendo una clase .css en el elemento, según el valor. Eso lo haremos en esta línea:

$color=$usuario['reposicion'] == 0 ? 'red' : 'black'; 

Luego, 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 es otra mala práctica.

En caso de que los valores sean cambiados por el usuario (en el cliente), y se requiera una actualización dinámica, también se puede hacer. En este caso ya desde Javascript, escuchando ese cambio y asignado al elemento una clase diferente. No parece ser el caso, pero de serlo, usar una clase .css te servirá también para ese caso de uso.

Veamos un ejemplo.


.css


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 usará en un futuro getElementById del lado del cliente.

<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>    
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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.

Esto lo puedes resolver de una forma más limpia, poniendo una clase .css en el elemento, según el valor.

Luego, si lo quieres actualizar dinámicamente, en caso de los valores sean cambiados por el usuario (en el cliente) también puedes cambiar la clase del elemento y el color cambiaría. No parece ser el caso, pero de serlo, usar una clase .css te servirá también para ese caso de uso.

Veamos un ejemplo, resolviendo todo desde PHP usando una clase .css.

En primer lugar, tendrías que crear un archivo de estilo con las siguientes reglas:

.red {
  color: #ee2500
}

.black {
  color: #333
}

.row-center {
  text-align: center
}

Luego, en PHP, haces algo así (introduciremos algunas mejoras que den claridad y simplicidad al código usando sprintf.

Código

DEMO

<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.

.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>