[SOLUCIONADO] Cambiar color de celda segun el dato obtenido

gc_web · #1 (**permalink**) 06/08/2014, 23:37

Hola amigos, Soy nuevo en la programación, pero me comprometí a realizar una base de datos de propietarios de cocheras, las cuales tienen 3 estados posibles que explico mas adelante. Se que han publicado cosas similares a la que necesito y de hecho yo me he basado en cosas publicadas aquí, pero no puedo lograr mostrar distintos colores según cual sea el dato.

La BD trae Nro. de cochera, Nombre del propietario y estado de la cochera y lo que necesito es que el color de fondo de la celda que muestra el estado de la cochera cambie de acuerdo al estado de dicha cochera. Los estados pueden ser solo 3:

Cochera Ocupada por el propietario
Cochera Ocupada por el inquilino
Cochera Desocupada

El código completo que utilizo es el siguiente:
(faltaría el archivo conexion.php pero es el que se conecta a la BD)

Código PHP:

Ver original<?php
require("conexion.php");
 
//$query = "SELECT * FROM cocheras ORDER BY num_cochera ASC";
$query = "SELECT * FROM `cocheras` AS c JOIN estados AS e ON c.estado_id=e.estado_id WHERE 1 ORDER BY num_cochera";
 
$queEmp = mysql_query($query, $conexion);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Garage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Listado de Propietarios Garage Fray J. S. M. de Oro 2520</h3>
 
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th>Nro. Cochera</th>
    <th>Propietario</th>
    <th>Estado de la Cochera</th>
  </tr>
  <?php while ($rsEmp = mysql_fetch_array($queEmp))
{  $estado_color = array(
        'Ocupada por el propietario' => '#FF0000',
        'Ocupada por el inquilino' => '#00FF00',
        'Desocupada' => '#0000FF'
    ) ?>
  <tr>
    <td><?php echo $rsEmp['num_cochera']; ?></td>
    <td><?php echo $rsEmp['prop_nombre']; ?></td>
    <td bgcolor="<?php $estado_color[$rsEmp['tipo_estado']] ?>"><?php echo $rsEmp['tipo_estado']; ?></td>
  </tr>
  <?php } ?>
</table>
 
</body>
</html>

Si alguien pudiera echarme una mano lo agradecería, ya que soy diseñador web y apenas conozco la programación PHP. Gracias

Alexis88 · #2 (**permalink**) 07/08/2014, 00:42

Te faltó imprimir la variable, es decir, la palabra echo.

Código HTML:

Ver original<td bgcolor="<?php echo $estado_color[$rsEmp['tipo_estado']] ?>">

Aunque particularmente te aconsejo trabajar con clases y estilos (CSS). El array $estado_color podría estar antes de iniciar el bucle pues nunca varían sus valores, de este modo, evitarías crear al mismo array en cada iteración, lo cual es innecesario.

Saludos

gc_web · #3 (**permalink**) 07/08/2014, 01:13

Gracias Alexis88 !!! Ha funcionado a la perfección.
Sería muy complicado realizarlo con CSS??? porque si bien conozco CSS pero no se aplicarlo en PHP. De nuevo gracias Alexis88

bookmaster · #4 (**permalink**) 07/08/2014, 01:48

Podrías hacerlo incluso con Jquery si te apañas mejor, de la siguiente manera:
En la parte del head:

Código Javascript:

Ver original<script>
$(document).ready(function(){
    $("tr").each(function(){
        $(this).children("td").each(function(){
            switch ($(this).html()) {
                case 'A':
                    $(this).css("background-color", "#F00");
                break;
                case 'B':
                    $(this).css("background-color", "#0F0");
                break;
                case 'C':
                    $(this).css("background-color", "#00F");
                break;
            }
        })
    })
});
</script>

Y la tabla:

Código HTML:

Ver original<table>
    <tr>
        <td>A</td><td>B</td><td>C</td>
    </tr>
</table>

Ejemplo funcionando.

Fíjate que se cambia el calor si coincide con la letra asignada, en tu caso sería cambiar las letras por el literal que vayas a usar.

gc_web · #5 (**permalink**) 07/08/2014, 02:29

bookmaster, luego de bajar jquery-2.1.1.min.js he logrado hacerlo funcionar y me parece muy práctico. Incluso pienso usar este modelo. Pero solo por curiosidad, cómo sería realizarlo con CSS?
Porque también me gustaría poder usar estilos css en otros sectores.
Desde ya muchas gracias, me ha servido mucho todo.

bookmaster · #6 (**permalink**) 07/08/2014, 06:12

Para hacerlo con CSS tendrías que hacer lo mismo que en php, con la única diferencia que en vez de asignarle los colores al style, le pasas el nombre del class.

Ya que con CSS3 tienes los selectores y le puedes poner tags/atributos personalizados, pero no puede saber el contenido que hay entre las etiquetas.

Alexis88 · #7 (**permalink**) 07/08/2014, 08:59

Sería cuestión de que crees tres clases en tu hoja de estilos:

Código CSS:

Ver original.Ocupada_por_el_propietario{
    background: #FF0000;
}
 
.Ocupada_por_el_inquilino{
    background: #00FF00;
}
 
.Desocupada{
    background: #0000FF;
}

Y cuando hagas la asignación de la clase respectiva en el bucle while del código PHP, primero tendrías que reemplazar los espacios por guiones bajos pues los nombres de las clases en CSS no pueden tener espacios:

Código PHP:

Ver original$clase = str_replace(' ', '_', $rsEmp['tipo_estado']);

Y ya luego asignas dicho valor al atributo class del elemento:

Código HTML:

Ver original<td class="<?php echo $clase; ?>">

Saludos

gc_web · #8 (**permalink**) 07/08/2014, 22:22

Alexis88 y bookmaster quiero agradecerles por todos sus comentarios ya que me han sido de mucha ayuda. Voy a utilizar el modelo hecho con JQuery propuesto por bookmaster y voy a usar selectores CSS para muchas cosas dentro de este proyecto, ya que recién estoy empezando con PHP. De nuevo gracias a ambos amigos. Cierro el tema como Solucionado.
Saludos.