1

tengo un campo en una tabla de mi BD que se llama fehca , mi duda es comopuedo hacer que al mostrarla en mi sentencia php cambie de color dependiendo de la condicion de la fecha , por ejemplo si han pasado 14 dias desde la fecha el color mostrado sera rojo si han pasado 8 dias debe ser amarillo si han pasado 5 dias debe ser verde

introducir la descripción de la imagen aquí

Quiero que el campo fecha se muestre en otros colores dependiendo de la condición,no se como se podria hacer eso

  $alumnos="SELECT * FROM contribuyente $where $limit";
  $resAlumnos=$conexion->query($alumnos);
  $resCarreras=$conexion->query($alumnos);

  if(mysqli_num_rows($resAlumnos)==0)
  {
  $mensaje="<h1>No hay registros que coincidan con su criterio de búsqueda.</h1>";
   }
   ?>

  <?php include 'partials/menu.php';?>
  <div class="container">
   <div class="starter-template">
    <br>
    <br>
    <br>
    <div class="jumbotron">
        <div class="container text-center">
            <h2><strong>Bienvenido</strong> <?php echo $_SESSION["usuario"]["nombre"]; ?></h2>
            <p>Panel de control | <span class="label label-info"><?php echo $_SESSION["usuario"]["privilegio"] == 1 ? 'Admin' : 'Cliente'; ?></span></p>
            <p>
                <a href="cerrar-sesion.php" class="btn btn-primary btn-lg">Cerrar sesión</a>
            </p>
        </div>
    </div>
  </div>
  </div><!-- /.container -->
  <?php include 'partials/footer.php';?>
  <section class="box"> 
        <form method="post">
            <input type="text" placeholder="Folio" name="nombre"/>

            <button name="buscar" type="submit" class="button special icon fa-search ">Buscar</button>
                  ";
        </form></section>
    <div class="panel panel-default">
                <div class="panel-body">
    <table class="table">
            <tr class="odd gradeX">
                <th>Folio</th>
                <th>Nombre</th>
                <th>Rut</th>
                <th>Correo</th>
                <th>Telefono</th>
                <th>Direccion</th>
                <th>Poste</th>
                <th>Solicitud</th>
                <th>Fecha</th>
                <th>Estado</th>
                <th>Borrar</th>
                <th>Reporte</th>
                <th>Enviar</th>

            </tr>

            <?php

            while ($registro = $resAlumnos->fetch_array(MYSQLI_BOTH))
            {

                    echo "<tr class='success'>";
                   echo "<form action ='guardar.php' method= 'POST'>";
                    echo "<td>$registro[0]</td>";
                    echo "<td>$registro[1]</td>";
                    echo "<td>$registro[2]</td>";
                    echo "<td>$registro[3]</td>";
                    echo "<td>$registro[4]</td>";
                    echo "<td>$registro[5]</td>";
                    echo "<td>$registro[6]</td>";
                    echo "<td>$registro[7]</td>";
                    echo "<td>$registro[10]</td>";
                    echo "<td>$registro[8]</td>";
                    echo "<td><a href='admin.php?id=$registro[0]&idborrar=2'><img src='./images/eliminar.png' class='img-rounded'/></a></td>";
                    echo "<ul class='actions'>";
                    echo "<td><a href='actualizar.php?id=$registro[0]'><img src='./images/editar.png' class='img-rounded'></td>";
                    echo "<td><a href='enviarmail.php?id=$registro[0]'><img src='./images/enviar.png' class='img-rounded'></td>";
                    echo "</ul>";
                    echo "</form>";



                echo "</tr>";
             }

            echo "</table>";
2
  • 1
    Sino pones tu codigo es muy dificil ayudarte
    – alanfcm
    Commented el 22 may. 2018 a las 21:39
  • 1
    Hola, ¿podrías colocar el código en el que necesitas ayuda? Commented el 22 may. 2018 a las 22:39

2 respuestas 2

1

Puedes hacerlo con javascript.

1.Obtén el dato con JS del lugar donde lo necesitas. Normalmente si lo tienes en una tabla lo puedes obtener con innerHTML haciendo referencia a la clase del elemento.

Tienes algo así < th class="fecha">Firstname < /th>

var x = document.getElementsByClassName("fecha");
  1. Procura usar el formato que tienen las fechas en JS https://www.w3schools.com/jsref/jsref_obj_date.asp Te recomendaría que crearas un objeto Date.

  2. Haz las condiciones en base al objeto date que creaste y el objeto que haga referencia al día de hoy. Si las condiciones se cumplen, puedes cambiar el estilo de tu fila completa

document.TUELEMENTO.style.backgroundColor = "red";

1

Te propongo una solución desde PHP. Allí al crear la tabla enviarás la fecha a una función que va a comparar los días transcurridos entre esa fecha y la fecha actual (o cualquier otra fecha que desees) y en base a eso le asignará al valor fecha una clase CSS con el color.

Luego, vía CSS aplicarás el color.

Te muestro un ejemplo completo.

Código PHP

EDIT: Versión optimizada, prescindimos del switch, buscando el valor del color en un array basándonos en la cantidad de días. Ganamos en claridad y en escritura de código, sobre todo en caso de tener que evaluar muchas opciones.

Yo he simulado un array con tus datos, a partir del cual se construye la tabla.

<?php

    /*Datos desde donde se construye la tabla*/
    $arrDatos=array(
                        array("folio"=>155, "nombre"=>"Juana", "fecha"=>"2018-05-09"),
                        array("folio"=>156, "nombre"=>"Luisa", "fecha"=>"2018-05-15"),
                        array("folio"=>157, "nombre"=>"Daniela", "fecha"=>"2018-05-18"),
                        array("folio"=>158, "nombre"=>"Camila", "fecha"=>"2018-05-22"),
                );

    /*Vamos a crear una variable a la cual le iremos concatenando los elementos de la tabla*/
    $tableHTML='<table class="my-table">';
    /*Obtenemos encabezados de forma dinámica*/
    $arrHeaders=array_keys($arrDatos[0]);
    $tableHeaders= '<thead><th>'.implode('</th><th>', $arrHeaders).'</th></thead>';
    $tableHTML.=$tableHeaders;

    foreach ($arrDatos as $items) {
        $tableHTML.='<tr>';    
        foreach ($items as $k=>$v) {
            $td='<td>';
            /*Aquí, cuando sea la clave "fecha", asignaremos el dato evaluando con la función checkDates*/
            $td.=($k=="fecha") ? checkDates($v) : $v;
            $td.='</td>';            
            $tableHTML.=$td;            
        }
        $tableHTML.='</tr>';
    }

    $tableHTML.='</table>';
    echo $tableHTML;


    /*Función para comparar las fechas*/
    function checkDates($strDate){
        $dateThis = new DateTime($strDate);
        $dateToday = new DateTime('now');

        /*
           *Cuando usamos diff obtenemos un objeto en el
           *cual se encuentran, entre otros datos
           *la diferencia en días. La propiedad es days
        */
        $diffDays = $dateToday->diff($dateThis)->days;
        //echo $diffDays.PHP_EOL;

        $arrColors = array('green'=>5, 'yellow'=>8, 'red'=>14);

        $ifColor=array_search($diffDays, $arrColors);
        $cssColor=($ifColor) ? 'color-'.$ifColor : 'color-black';

        return '<span class="'.$cssColor.'">'.$strDate.'</span>'; 
    }
?>

La salida de este código será algo así:

<table class="my-table">
    <thead>
        <tr>
            <th>folio</th>
            <th>nombre</th>
            <th>fecha</th>
        </tr>
    </thead>

    <tr>
        <td>155</td>
        <td>Juana</td>
        <td><span class="color-red">2018-05-09</span></td>
    </tr>

    <tr>
        <td>156</td>
        <td>Luisa</td>
        <td><span class="color-yellow">2018-05-15</span></td>
    </tr>

    <tr>
        <td>157</td>
        <td>Daniela</td>
        <td><span class="color-green">2018-05-18</span></td>
    </tr>

    <tr>
        <td>158</td>
        <td>Camila</td>
        <td><span class="color-black">2018-05-22</span></td>
    </tr>
</table>

Código CSS

El código CSS que establece el color es tan sencillo como esto:

.color-yellow {
    color:#ffd500; /*Puede que yellow sea difícil de ver*/
}

.color-green {
    color:green;
}

.color-red {
    color:red;
}

Vamos a ver un fragmento de código de la salida de nuestra tabla, combinado con CSS:

<style>
.my-table {
	border-collapse:collapse;
	width:100%;
}

.my-table td,.my-table th {
	border:0px solid black;
	padding:4px;
}

.my-table tr:nth-child(even) {
	background-color:#f2f2f2;
}

.my-table tr:hover {
	background-color:#ddd;
}

.my-table th {
	padding-top:12px;
	padding-bottom:12px;
	text-align:left;
	background-color:#7f7fff;
	color:#fff;
}

.color-yellow {
	color:#ffd500;
}

.color-green {
	color:green;
}

.color-red {
	color:red;
}
    <table class="my-table">
        <thead>
            <tr>
                <th>folio</th>
                <th>nombre</th>
                <th>fecha</th>
            </tr>
        </thead>

        <tr>
            <td>155</td>
            <td>Juana</td>
            <td><span class="color-red">2018-05-09</span></td>
        </tr>

        <tr>
            <td>156</td>
            <td>Luisa</td>
            <td><span class="color-yellow">2018-05-15</span></td>
        </tr>

        <tr>
            <td>157</td>
            <td>Daniela</td>
            <td><span class="color-green">2018-05-18</span></td>
        </tr>

        <tr>
            <td>158</td>
            <td>Camila</td>
            <td><span class="color-black">2018-05-22</span></td>
        </tr>
    </table>

6
  • 1
    Como lo puedo hacer para que los datos de las fechas mostradas sean extraídos desde la base de datos primero y mostrarlo con colores ,
    – Daniela
    Commented el 23 may. 2018 a las 14:11
  • 1
    @Daniela tendrías que lanzar una consulta a la base de datos que te genere la información en forma de un array parecido a $arrDatos. Son procedimientos habituales. Aquí mismo en Stackoverfkow hay varias respuestas que explican cómo se hace.
    – A. Cedano
    Commented el 23 may. 2018 a las 15:17
  • 1
    esa es mi sentencia para acceder a la BD $alumnos="SELECT * FROM contribuyente "; $resAlumnos=$conexion->query($alumnos); $resCarreras=$conexion->query($alumnos); <?php while ($registro = $resAlumnos >fetch_array(MYSQLI_BOTH)) { echo "<tr class='success'>"; echo "<form action ='guardar.php' method= 'POST'>"; echo "<td>$registro[10]</td>"; el registro 10 es el que muestra la fecha pero e tratado de modificarlo a un array pero no entiendo como
    – Daniela
    Commented el 23 may. 2018 a las 17:54
  • 1
    @Daniela luego te pongo un ejemplo,.ahora estoy desde el móvil y se me hace más complicado.
    – A. Cedano
    Commented el 23 may. 2018 a las 19:45
  • 1
    Gracias seria de gran ayuda .
    – Daniela
    Commented el 23 may. 2018 a las 20:05

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.