How to give different bg color to each created using php function?

Question

I've a table showing 7 days of week created using php function. How can i give different background color to each day in the table. I'm new to this, any and all help would be great.

<?php 
for($prev_days = 0 ; $prev_days<7;$prev_days++) {
    $curr_date = date('Y-m-d', strtotime(-$prev_days.' days'));
    $dayOfWeek = date("l",strtotime(strval($curr_date)));
    /*echo $dayOfWeek;*/
?>
    <td title="click here to see the files">
        <label>
            <a onclick="document.getElementById('id01').style.display='block'" class="clr">
                <?php echo substr(strval($dayOfWeek),0,3); ?>
            </a>
        </label>
    </td>
<?php
    }
?>

.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);    
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");  background: -o-linear-gradient(top,#005fbf,003f7f);
background-color:#005fbf;
}

This is the table created : https://i.stack.imgur.com/nLnxP.png

Raul · Answer 1 · 2019-06-01T04:04:18.617

CSS only solution. Put a class on the tr parent of the td's and then use a number from 1 to 7 to add bg color on each.

.someclass td:nth-child(1) {
  background:blue
}
.someclass td:nth-child(2) {
  background:red
}
....
.someclass td:nth-child(7) {
  background:green
}



<tr class="someclass">
<?php for($prev_days = 0 ; $prev_days<7;$prev_days++) {$curr_date = date('Y-m-d', strtotime(-$prev_days.' days'));$dayOfWeek = date("l",strtotime(strval($curr_date)));
/*echo $dayOfWeek;*/?>
<td title="click here to see the files"><label><a onclick="document.getElementById('id01').style.display='block'" class="clr"><?php echo substr(strval($dayOfWeek),0,3); ?></a></label></td>
<?php}?>
</tr>

Edit: after looking again at your image second solution I had is not good.

score 0 · Answer 2 · answered May 31 '19 at 19:33

CSS Solution

Using nth terms:

td:nth-of-type(1) {
  background: red;
}
td:nth-of-type(2) {
  background: blue;
}
td:nth-of-type(3) {
  background: green;
}
td:nth-of-type(4) {
  background: yellow;
}
td:nth-of-type(5) {
  background: orange;
}
td:nth-of-type(6) {
  background: gray;
}

... And so on

PHP Solution

First off, you'd want to create a method that returns a random HEX or something

Like so:

<?php
function random_color_part() {
    return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
}

function random_color() {
    return random_color_part() . random_color_part() . random_color_part();
}
?>

Generating a random hex color code with PHP

Next, we need to use this like so:

<?php for($prev_days = 0 ; $prev_days<7;$prev_days++) {$curr_date = date('Y-m-d', strtotime(-$prev_days.' days'));$dayOfWeek = date("l",strtotime(strval($curr_date)));
/*echo $dayOfWeek;*/?>
<td title="click here to see the files"><label><a onclick="document.getElementById('id01').style.display='block'" style=<?php echo "'" . random_color() . "'" ?> class="clr"><?php echo substr(strval($dayOfWeek),0,3); ?></a></label></td>
<?php}?>

So basically we're using PHP to output a dynamic style attribute to each TD.

Hopefully, this helped ya out, mate!

score 0 · Answer 3 · answered May 31 '19 at 19:46

There are a number of way to do that. I can see some good solutions here. But here is a PHP only solution with minimal changes in your code.

<?php 
$day_color = ["#ffccee","#ccccee","#f1dcee","#a2ccf3","#d7c3e3","#f3cc3e","#6fc63e"];
for($prev_days = 0 ; $prev_days<7;$prev_days++) {
    $curr_date = date('Y-m-d', strtotime(-$prev_days.' days'));
    $dayOfWeek = date("l",strtotime(strval($curr_date)));
    /*echo $dayOfWeek;*/
?>
    <td title="click here to see the files">
        <label style="background-color:<?php echo $day_color[$prev_days]?>">
            <a onclick="document.getElementById('id01').style.display='block'" class="clr">
                <?php echo substr(strval($dayOfWeek),0,3); ?>
            </a>
        </label>
    </td>
<?php
    }
?>

you can choose your desired colors in the $day_color array as you see fit.

Thanks a lot, this works perfectly. But have another problem. This Colors are not overriding external css. Is there any solution for that. Thankyou — , Jun 01 '19 at 06:04

How to give different bg color to each created using php function?

3 Answers3

CSS Solution

PHP Solution