PHP根据字符串更改表中的行颜色

Question

我正在尝试使其在表格中每当显示“添加”时变为绿色，每当其“移除”时变为红色，而“修复”时变为蓝色。 但它只是显示为默认颜色，在代码中为$color4 。

我的代码：

<?php
$db_host = 'HIDDEN'; // Server Name
$db_user = 'HIDDEN'; // Username
$db_pass = 'HIDDEN'; // Password
$db_name = 'HIDDEN'; // Database Name

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
die ('Failed to connect to MySQL: ' . mysqli_connect_error());  
}

$sql = 'SELECT * 
    FROM changelog ORDER BY id DESC';

$query = mysqli_query($conn, $sql);

if (!$query) {
die ('SQL Error: ' . mysqli_error($conn));
}
?>
<?php

function switchColor($row) { 

//Define the colors first 
$color1 = '#BAFFAE'; 
$color2 = '#AEFDFF'; 
$color3 = '#FFAEAE';
$color4 = '#DED6BA'; 

    /*Change the 'cases' to whatever you want them to be,  
    so if you want to change the color according to  
    occupation, write down the possible occupations or if  
    the color changes according to gender, name the gender 
    names that come out of the database (eg. case 'male':).*/ 

switch ($row) { 
    case 'Add': 
        echo $color1; 
        break; 
    case 'Fix': 
        echo $color2; 
        break; 
    case 'Remove': 
        echo $color3; 
        break; 
    default: 
        echo $color4; 
} 
} 

?> 





<html>
<head>
<title>Arny's Test Server | CHANGELOG |</title>
<style type="text/css">
    body {
        background-image: url(removed);
        font-size: 15px;
        color: #e1edff;
        font-family: "segoe-ui", "open-sans", tahoma, arial;
        padding: 0;
        margin: 0;
    }
    table {
        margin: auto;
        font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
        font-size: 12px;
    }

    h1 {
        margin: 25px auto 0;
        text-align: center;
        text-transform: uppercase;
        font-size: 17px;
    }

    table td {
        transition: all .5s;
    }

    /* Table */
    .data-table {
        border-collapse: collapse;
        font-size: 14px;
        min-width: 537px;
    }

    .data-table th, 
    .data-table td {
        border: 1px solid #e1edff;
        padding: 7px 17px;
    }
    .data-table caption {
        margin: 7px;
    }

    /* Table Header */
    .data-table thead th {
        background-color: #508abb;
        color: #FFFFFF;
        border-color: #6ea1cc !important;
        text-transform: uppercase;
    }

    /* Table Body */
    .data-table tbody td {
        color: #353535;
    }
    .data-table tbody td:first-child,
    .data-table tbody td:nth-child(4),
    .data-table tbody td:last-child {
        text-align: right;
    }

    .data-table tbody tr:nth-child(odd) td {
        background-color: <?php switchColor($result['type']) ?>;
    }

    .data-table tbody tr:nth-child(even) td {
        background-color: <?php switchColor($result['type']) ?>;
    }

    .data-table tbody tr:hover td {
        background-color: #ffffa2;
        border-color: #ffff0f;
    }

    /* Table Footer */
    .data-table tfoot th {
        background-color: #e5f5ff;
        text-align: right;
    }
    .data-table tfoot th:first-child {
        text-align: left;
    }
    .data-table tbody td:empty
    {
        background-color: #ffcccc;
    }
</style>
</head>
<body>
<h1>Arny's Test Server | CHANGELOG |</h1>
<table class="data-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Type</th>
            <th>Description</th>
            <th>Platform</th>
            <th>Developer</th>
            <th>Timestamp</th>
        </tr>
    </thead>
    <tbody>
    <?php
    while ($row = mysqli_fetch_array($query))
        // Ascending Order


    {
        echo '<tr>
                <td>'.$row['id'].'</td>
                <td>'.$row['type'].'</td>
                <td>'.$row['description'].'</td>
                <td>'.$row['platform'].'</td>
                <td>'.$row['developer'].'</td>
                <td>'.$row['timestamp'].'</td>
            </tr>';
    }?>

    </tbody>

</table>
</body>
</html>

但这是行不通的。 我已经尝试了很长时间才能使它正常工作，所以我将不胜感激！ 谢谢。

Answer 1

您要实现的代码不正确，也就是说，您的逻辑（代码）存在缺陷。

$array['type']不存在，这就是为什么switchColor总是返回默认颜色+您以错误的方式应用该颜色的原因。

要获得所需的内容，您应该删除.data-table tbody tr:nth-child(odd) td和.data-table tbody tr:nth-child(even) td CSS规则（它们旨在达到不同的效果），并添加以下内容那些：

.data-table tbody tr td {
    background-color: #DED6BA;
}

.data-table tbody tr.Add td {
    background-color: #BAFFAE;
}

.data-table tbody tr.Fix td {
    background-color: #AEFDFF;
}

.data-table tbody tr.Remove td {
    background-color: #FFAEAE;
}

接下来，在您回显tr的行上应如下所示：

echo '<tr class="' . $row['type'] . '">

该解决方案定义了几种具有不同背景样式的CSS类。 我们通过在tr标签上设置class属性来选择要应用的样式。 以前，您只有一种样式，并且该样式已应用于表的所有行。

Ah和功能switchColor也可以删除。

更多信息：
https://www.w3schools.com/css/css_syntax.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

PHP根据字符串更改表中的行颜色

问题描述

1 个解决方案

解决方案1
1 2018-03-28 15:55:49

PHP根据字符串更改表中的行颜色

问题描述

1 个解决方案

解决方案1 1 2018-03-28 15:55:49

解决方案1
1 2018-03-28 15:55:49