2

estoy haciendo una tabla que lee los valores extraídos de la base de datos con php y necesito hacer que cuando algun valor de la columna reposicion sea cero se coloree de rojo.

Explicación:

hice una condicional de javascript de modo cuando la variable "valor" (var valor="<?php echo $usuario['reposicion']?>"; sea igual a 0 entonces colorear de rojo el texto del ancla con el name "campo" y la id "enlace":
<a style="" id="enlace" name="campo" href="repo.php?repos=<?php echo $usuario['reposicion'];?>"><?php echo $usuario['reposicion']?></a> esto lo hace usando un if de javascript que hace que cuando el valor sea igual a cero entonces usar una sentencia getElementsByNameque llama al ancla por su name, este es el if :

<script>
  var valor = "<?php echo $usuario['reposicion']?>";
  if(valor =="0"){
    document.getElementsByName("campo")[0].style.backgroundColor = "#ee2500";
  }else{
   document.getElementsByName("campo")[0].style.backgroundColor = "#333";
  }
</script>

El problema es que la condicional esta dentro de un ciclo foreach de PHP que lee todos los datos extraídos de la DB y por alguna razón este condicional no funciona, pues de todos los datos que lee solo funciona con el primero.

<table>
    <thead>
       <th>id</th>
       <th>No. Devolucion</th>
       <th>Reposicion</th>
    </thead>
    <tbody>
    <?php
    if($rol_user==='admin' || $rol_user==='administrativo'){
          foreach($usuarios as $usuario){
          ?>
           <tr style="text-align:center">
           <td><?php echo $usuario['id']?></td>
           <td><?php echo $usuario['Devolucion']?></td>
           <td>
             <a id="enlace" name="campo" href="repo.php?repos=<?php echo $usuario['reposicion'];?>">
                <?php echo $usuario['reposicion']?>
             </a>
             <script>
               var valor = "<?php echo $usuario['reposicion']?>"; //si la variable es 0 entonces
               if(valor =="0"){
                   document.getElementsByName("campo")[0].style.backgroundColor = "#ee2500";//colorear de rojo 
               }else{
                   document.getElementsByName("campo")[0].style.backgroundColor = "#333"; //dejar normal
               }
              </script>
           </td>

          <?php
           }
        }
   </tbody>
</table>

1 respuesta 1

2

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.

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.