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类。我们通过在class标记上设置tr属性来选择要应用的样式。以前，您只有一种样式，并且一种样式应用于表的所有行。

啊，功能switchColor也可以删除。

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

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

1 个答案: