Change color column date in mysql and php

I propose a solution from PHP. There when creating the table you will send the date to a function that will compare the days elapsed between that date and the current date (or any other date you want) and based on that will assign the date value a CSS class with the color.

Then, via CSS, you will apply the color.

I'll show you a complete example.

PHP Code

EDIT: Optimized version, we dispense with switch , looking for the color value in an array based on the number of days. We gain clarity and code writing, especially in case of having to evaluate many options.

I have simulated an array with your data, from which the table is built.

<?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>'; 
    }
?>

The output of this code will be something like this:

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

CSS Code

The CSS code that sets the color is as simple as this:

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

.color-green {
    color:green;
}

.color-red {
    color:red;
}

We will see a fragment of code from the output of our table, combined with 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>

You can do it with javascript.

1. Get the data with JS where you need it. Normally if you have it in a table you can get it with innerHTML referring to the class of the element.

You have something like that < th class="date" > Firstname < / th >

var x = document.getElementsByClassName("fecha");

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