如何为使用 php 函数创建的每个 <td> 赋予不同的 bg 颜色？

Question

我有一个表格，显示使用 php 函数创建的一周中的 7 天。如何为表格中的每一天赋予不同的背景颜色。我是新手，任何和所有的帮助都会很棒。

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

这是创建的表 ：https://i.stack.imgur.com/nLnxP.png

Answer 1

只有 CSS 的解决方案。在 td 的 tr 父级上放置一个类，然后使用 1 到 7 之间的数字在每个上添加 bg 颜色。

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

编辑：再次查看您的图像后，我的第二个解决方案并不好。

Answer 2

有很多方法可以做到这一点。我可以在这里看到一些好的解决方案。但这是一个仅 PHP 的解决方案，对您的代码进行了最小的更改。

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

您可以在$day_color 数组中选择您认为合适的颜色。

Answer 3

CSS 解决方案

使用第 n 个术语：

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

...等等

PHP 解决方案

首先，您需要创建一个返回随机 HEX 或其他内容的方法

像这样：

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

接下来，我们需要这样使用：

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

所以基本上我们使用 PHP 来为每个 TD 输出一个动态样式属性。

希望这对你有所帮助，伙计！