3

Llevo un tiempo dando vueltas y no soy capaz de dar con la solucion, a ver si me podeis ayudar. He intentado hacer busquedas en la web, pero no encuentro lo que necesito.

Os explico. Tengo una tabla (.php), la tabla obtiene los valores mediante una consulta a mysql. Hasta aqui funciona correctamente.

Lo que necesito es que mediante css, js o lo que se os ocurra, en una de las columnas (ciudad), las celdas tengan un color diferente dependiendo de la ciudad que figure. Por ejemplo: Si el resultado de la consulta en esa celda es Madrid, el fondo sea rojo, si el resultado es Cordoba, sea azul y asi sucesivamente.

<?php
require_once 'connection_simple_tareas.php';
$result;

$conn = dbConnect();
// Create the query
$sql = 'SELECT * FROM tareas ORDER BY id desc';
// Create the query and asign the result to a variable call $result
$result = $conn->query($sql);
// Extract the values from $result
$rows = $result->fetchAll();
// Since the values are an associative array we use foreach to extract the values from $rows

?>

</head>
<body>

    <table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Fecha entrada</th>
            <th>Ticket</th>
            <th>Ciudad</th>
            <th>Tipo</th>
            <th>Titulo</th>
            <th>Comentarios</th>
            <th>Direccion</th>
            <th>Nodo</th>
            <th>Tecnico</th>
            <th>Fecha cierre</th>
            <th>Solucion</th>

        </tr>
    </thead>
    <tbody>
    <?php
        foreach ($rows as $row) {
    ?>
        <tr>
            <td><?php echo $row['id']; ?></td>
            <td><?php echo $row['fecha_entrada']; ?></td>
            <td><?php echo $row['ticket']; ?></td>
            <td><?php echo $row['ciudad']; ?></td>
            <td><?php echo $row['tipo']; ?></td>
            <td><?php echo $row['titulo']; ?></td>
            <td><?php echo $row['comentarios']; ?></td>
            <td><?php echo $row['direccion']; ?></td>
            <td><?php echo $row['nodo']; ?></td>
            <td><?php echo $row['tecnico']; ?></td>
            <td><?php echo $row['fecha_cierre']; ?></td>
            <td><?php echo $row['solucion']; ?></td>
        </tr>
    <?php } ?>
    </tbody>
</table>
7
  • 1
    Hola amigo, podrias colocar el codigo que llevas hecho hasta el momento Commented el 30 mar. 2017 a las 14:08
  • 1
    como puedo insertar el codigo??
    – paco
    Commented el 30 mar. 2017 a las 14:09
  • 1
    Edita tu pregunta al momento de editarla te saldra una obcion asi "{ }" esa es la opcion de insertar codigo Commented el 30 mar. 2017 a las 14:11
  • 1
    Ahora no tengo aqui a mano el codigo para copiar y pegar, lo pongo de cabeza
    – paco
    Commented el 30 mar. 2017 a las 14:16
  • 1
    Primero se lanza la consulta a la base de datos Tras obtenerla están definidos los encabezados de las columnas con sus respectivo <th> xxxx</th> Y luego se rellenan las celdas con este código para cada celda de cada columna <td><?php echo $row [‘ciudad’]; ? ><td>
    – paco
    Commented el 30 mar. 2017 a las 14:21

3 respuestas 3

4

Para elegir el color de fondo en CSS se usa "background-color", aplicalo a la celda que quieras.
Por ejemplo:

<table>
<tr><td>celda 1<td style="background-color:salmon">celda 2
<tr><td>celda 3<td>celda 4
</table>

En tu caso particular, busca en el código PHP donde crea la tabla HTML y añade un class a los que creas oportuno, usa una matriz con los possibles resultados que quieras colorear y el nombre de la class a assignar, por ejemplo:

.fondo_salmon {background-color: salmon;}
.fondo_verde {background-color: lightgreen;}
<table>
<tr><td>Celda 1<td class=fondo_salmon>Celda 2
<tr><td class=fondo_verde>Celda 3<td>Celda 4
</table>

Otra posible solución, seria ir asignando un color a las celdas según el contenido de manera automática, guardando en un array los valores aparecidos.
Un ejemplo en JS, así se ve el resultado.

	var listaTD=IDlista.getElementsByTagName("TD"); //lista de <TD> de la tabla "IDlista"
	var valoresTD=[]; // Lista de valores, sin repetir.
	var coloresTD=[]; // id de color assignado a cada valor.
	var colores=["lightyellow","lightgreen","lightblue","salmon"];
	var colorIndice=0; // indice de color
	var i; // guardará el indice del valor encontrado/guardado.
	for (let td=0; td<listaTD.length; td++) {
    // Busca el valor del TD actual en la matriz de control
		i=valoresTD.findIndex(function(valor){return valor==listaTD[td].innerHTML});
		if (i==-1) { // Si no lo encuentra, lo guarda y assigna color
			valoresTD.push(listaTD[td].innerHTML);
			i=valoresTD.length-1;
			coloresTD.push(colorIndice++);
			if (colorIndice>=colores.length) colorIndice=0;
		}
    // Assigna el color de fondo.
		listaTD[td].style.backgroundColor=colores[coloresTD[i]];
	}
<table id=IDlista>
<tr><td>Celda 1</td><td>Celda 2</td>
<tr><td>Celda 3</td><td>Celda 4</td>
<tr><td>Celda 2</td><td>Celda 4</td>
<tr><td>Celda 3</td><td>Celda 1</td>
</table>

La idea es introducir tantos colores como valores distintos haya, si hay menos volverá a empezar la lista de colores.
En tu caso particular, si solo quieres colorear una columna, usa un class para identidicarlas, el script deberia ser algo parecido a esto...

	var listaTD=tabla1.getElementsByClassName("autoColor");
	var valoresTD=[];
	var coloresTD=[];
	var colores=["lightyellow","lightgreen","lightblue","salmon"];
	var colorIndice=0;
	var i;
	for (let td=0; td<listaTD.length; td++) {
		i=valoresTD.findIndex(function(valor){return valor==listaTD[td].innerHTML});
		if (i==-1) {
			valoresTD.push(listaTD[td].innerHTML);
			i=valoresTD.length-1;
			coloresTD.push(colorIndice++);
			if (colorIndice>=colores.length) colorIndice=0;
		}
		listaTD[td].style.backgroundColor=colores[coloresTD[i]];
	}
    <table border="1" id="tabla1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Fecha entrada</th>
            <th>Ticket</th>
            <th>Ciudad</th>
            <th>Tipo</th>
            <th>Titulo</th>
            <th>Comentarios</th>
            <th>Direccion</th>
            <th>Nodo</th>
            <th>Tecnico</th>
            <th>Fecha cierre</th>
            <th>Solucion</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>id1</td>
            <td>fecha1</td>
            <td>ticket1</td>
            <td class="autoColor">ciudad1</td>
            <td>tip1o</td>
            <td>titulo1</td>
            <td>comentarios1</td>
            <td>direccion1</td>
            <td>nodo1</td>
            <td>tecnico1</td>
            <td>cierre1</td>
            <td>solucion1</td>
        </tr>
        <tr>
            <td>id2</td>
            <td>fecha2</td>
            <td>ticket2</td>
            <td class="autoColor">ciudad2</td>
            <td>tipo2</td>
            <td>titulo2</td>
            <td>comentarios2</td>
            <td>direccion2</td>
            <td>nodo2</td>
            <td>tecnico2</td>
            <td>cierre2</td>
            <td>solucion2</td>
        </tr>
        <tr>
            <td>id3</td>
            <td>fecha3</td>
            <td>ticket3</td>
            <td class="autoColor">ciudad1</td>
            <td>tipo3</td>
            <td>titulo3</td>
            <td>comentarios3</td>
            <td>direccion3</td>
            <td>nodo3</td>
            <td>tecnico3</td>
            <td>cierre3</td>
            <td>solucion3</td>
        </tr>
        </tr>
        <tr>
            <td>id4</td>
            <td>fecha4</td>
            <td>ticket4</td>
            <td class="autoColor">ciudad3</td>
            <td>tipo4</td>
            <td>titulo4</td>
            <td>comentarios4</td>
            <td>direccion4</td>
            <td>nodo4</td>
            <td>tecnico4</td>
            <td>cierre4</td>
            <td>solucion4</td>
        </tr>        
    </tbody>
</table>


La idea se puede adaptar a PHP sin problemas, he usado JS para que se vea el resultado.

10
  • 1
    Gracias por contestar, pero eso no me sirve, las celdas se rellenan desde una consulta a base de datos y no puedes predecir el valor que va a tener cada celda
    – paco
    Commented el 30 mar. 2017 a las 14:22
  • 1
    la idea es que dependiendo del resultado de la consulta, el fondo cambie a un color u otro
    – paco
    Commented el 30 mar. 2017 a las 14:23
  • 1
    Crea un Array con los distintos resultados que quieras colorear y su color correspondiente (color CSS o nombre de class a aplicar) y cada vez que ponga un <TD> busca el valor en el array y si está le aplicas el color (o class) que corresponda. Commented el 30 mar. 2017 a las 14:32
  • 1
    Creo que eso no me sirve. los datos que hay en cada celda son aleatorios, tendria que hacerse de una forma que el codigo "leyera" el texto y dependiendo de lo que fuera, aplicara un fondo un otro, lo mismo que se hace en excel con el formato condicional. algo asi como lo de esta imagen s2.subirimagenes.com/imagen/previo/thump_9714662captura.png
    – paco
    Commented el 30 mar. 2017 a las 14:34
  • 1
    lo del array me puede cuadran, me lo podrias explicar un poco mas
    – paco
    Commented el 30 mar. 2017 a las 14:35
3

No es una buena idea meter css "inline". Es mejor añadir una clase, por ejemplo ".green" en tu hoja de estilos, y la clase correspondiente en la tabla.

Además es mucho más claro y mantenible si lo metes en un array. Así si cambias un color, no tienes que rebuscar en el código, y puedes reutilizar las clases en otras partes de tu programa. Quedaría así:

    PHP:
    <?php 
    $arr_ciudades_colores = array(
            'madrid' => 'green', 
            'barcelona' => 'blue'
    );
    ?>

    ............

    HTML:
    <tr>
            <td class="<?php echo $arr_ciudades_colores[ $row['ciudad'] ];?>">
                    <?php echo $row['ciudad']; ?>
            </td>
    </tr>

    ............

    CSS:
    .green{background: green; // puedes sustituir green por su código en hexadecimal}
    .blue{background: blue;}

Espero que te sirva :)

3
  • 1
    ok, gracias, me lo miro
    – paco
    Commented el 30 mar. 2017 a las 15:47
  • 1
    justo tenía en mente algo muy parecido :D
    – fredyfx
    Commented el 30 mar. 2017 a las 16:23
  • 1
    Buena solución, asegúrate de rellenar la lista con todas las ciudades y que estén escritas igual que en la base de datos. Commented el 30 mar. 2017 a las 16:52
1

Si lo que necesitas es cambiar el color de la celda dependiendo del resultado de tu consulta podrías hacer lo siguiente:

<?php

$ciudad = ["Loja","Quito","Guayaquil" ]; //datos a mostrar en la tabla

$tabla = "<table>";
$tabla .= "<thead>";
$tabla .= "<tr>";
$tabla .= "<th>Ciudad</th>";
$tabla .= "</tr>";
$tabla .= "</thead>";
$tabla .= "<tbody>";
foreach($ciudad as $clave => $valor){ //Recorres los resultado de tu consulta y compruebas el valor de la celda que quieres colorear
    $tabla .= "<tr>";
    switch($valor){
        case "Loja";
            $tabla .= "<td bgcolor='#FF0000'>$valor</td>";
            break;
        default:
            $tabla .= "<td>$valor</td>";
            break;
    }

    $tabla .= "</tr>";
}
$tabla .= "</tbody>";
$tabla .= "</table>";

echo $tabla;

Compruebas el valor de tu consulta y cambias el color con el atributo bgcolor, en este caso uso switch ya que puedes comprobar algunos valores, si solo es uno podriías usar un condicional if

EDIT

En base al código que has puesto, lo que podrías hacer es lo siguiente:

Antes de imprimir el valor de ciudad, compara el valor y luego imprimes la celda.

Actualmente tienes esto:

<td><?php echo $row['ciudad']; ?></td>

Podrías hacer algo como:

<?php 

switch($row['ciudad']){
  case 'Madrid':
    echo "<td bgcolor='#FF0000'>$row[ciudad]</td>";
    break;
  case 'Barcelona':
    echo "<td bgcolor='#00FF00'>$row[ciudad]</td>";
    break;
  default:
    echo "<td>$row[ciudad]</td>";
    break;
}
?>
15
  • 1
    Lo que tendria que comprobar es unicamente el valos de los <td> de una columna
    – paco
    Commented el 30 mar. 2017 a las 14:38
  • 1
    Pero con tanto codigo me pierdo
    – paco
    Commented el 30 mar. 2017 a las 14:38
  • 1
    Con un if como seria??
    – paco
    Commented el 30 mar. 2017 a las 14:38
  • 1
    En cualquier caso debes recorrer los resultados de tu consulta, si necesitas comprobar un solo valor podrías usar if, de lo contrario deberías anidar ifs y el código se haría un poco ilegible, en ese caso es mejor usar switch, te pongo ese ejemplo ya que no esta el código que tu has hecho, y no sabria como estas trayendo los datos desde la db, la logica es recorrer tu consulta, y cuando llegue a la columna ciudad comparas el valor y cambias el color. Commented el 30 mar. 2017 a las 14:43
  • 1
    A ver si soy capaz de pegar el codigo, ya estoy en mi ordenador
    – paco
    Commented el 30 mar. 2017 a las 14:51

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