0

Lo que sucede es que estoy mostrando en pantalla unas variables de un array en una tabla, HTML, y me trae 3 tipos de datos, y según eso quiero que, dependiendo el dato, pinte de un color la celda

algo como...

<style>
  <?php if ($variable1==="a1"){ ?> color: red <?php } ?>
  <?php if ($variable1==="-"){ ?> color: grey <?php } ?>
<style>

y quiero que quede general en la hoja de estilo css.

2
  • Sería mejor que hagas el import del archivo css que contenga esa configuración de tu página. Saludos.
    – zerocool
    Commented el 11 oct. 2018 a las 20:00
  • Lo que debias hacer es dejar clases predefinidas en tu hoja de estilos .bg_red, .bg_blue, etc y cuando iteres al tr le agregas la clase Commented el 11 oct. 2018 a las 20:03

4 respuestas 4

1

Estoy de acuerdo con la respuesta de Pablo González, sin embargo, no usaría un script para asignar los colores a las celdas. Al imprimir las celdas (desde PHP) asignaría las clases a los <td> para que sean afectadas por el CSS correspondiente.

<td class="<?php if ($variable1==="a1"){ ?> rojo <?php } else {?> azul <?php} ?>"></td>

table {
  width: 200px;
  border-collapse: collapse;
}

table tr td {
  width: 100px;
  padding: 5px;
}

.rojo {
    background: #FF0000;
}

.azul {
    background: lightblue;
}

.verde {
    background: green;
}
<table>
    <tr>
        <td class="rojo">13</td>
        <td class="verde">14</td>
    </tr>
    <tr>
        <td class="azul">16</td>
        <td class="rojo">11</td>
    </tr>
    <tr>
        <td class="verde">0</td>
        <td class="azul">100</td>
    </tr>
</table>

1
  • Opción perfectamente válida. Un saludo. Commented el 11 oct. 2018 a las 22:58
0

En la celda, coloque un style="color:" y dentro coloque una funcion en php con un parametro, por ejemplo color(rojo)

style="color:<?php echo color(rojo);?>"

Despues cree una funcion en donde se haga un if

public function color($c){
     if($c == "rojo"){
         return "red";
     }else if($c == "green"){
         return "green";
     }
}
0

Una vez hayas rellenado toda la tabla, mediante un script de jquery cambias el color de fondo de los valores que te interesen. Te dejo un pequeño ejemplo. Creo la tabla con los valores que sean (pueden ser sacados de php) y luego cambio el color de fondo de los que sean pares.

$('td').each(function() { //para cada celda de la tabla
    var num = $(this).html(); //saco su valor
    if(num%2==0) { //si es par
        $(this).addClass('rojo'); //le cambio el fondo.
    }
    if(num%2==1) { //si es impar
        $(this).addClass('azul'); //le cambio el fondo.
    }
    if(num==0) { //si es cero
        $(this).addClass('verde'); //le cambio el fondo.
    }
});
.rojo {
    background: #FF0000;
}

.azul {
    background: lightblue;
}

.verde {
    background: green;
}





/* ESTO ES PARA DEJAR BONITA LA TABLA, LO PUEDES IGNORAR */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>16</td>
        <td>11</td>
    </tr>
    <tr>
        <td>0</td>
        <td>100</td>
    </tr>
</table>

0

Tienes varias formas de hacerlo, pero si lo que quieres es que quede general en tu css, entonces simplemente asigna esos cambios de color a una clase, ejemplo:

.cell-red{  background-color: red; } 
.cell-green{  background-color: green; }

Ahora si es posible asignar esa misma variable a la celda en usando un atributo data mejor, algo así:

<td class="x-cosa" data-color="green"></td>

En el css puede ir:

[data-color="green"]{ background: green }

Otra variante, para que ya este predeterminado en el css, puede ser usando variables, algo así como:

 <td class="x-cosa" style="--color-cell:<?php if ($variable1==="a1"){ ?> #ddd <?php } else {?> blue <?php} ?>"></td>

Y en el css, simplemente predeterminas la variable, colocas:

td.x-cosa{
   --color-cell: #fff;
   background-color: var(--color);
}

De esta manera, puedes colocar el valor de color que desees en las variables y como al final colocarías el color inline sobrescribirá el css.

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.