CODEWITHSUNDEEP
phphtmlcolors
Arny
Arny

Reputation: 1

PHP Change row colour in a table depending on the string

I am trying to make it so whenever it says 'Add' in the table, it turns green, whenever it is 'Remove' it turns red, and 'Fix' turns blue. But it just shows as the default colour, which is $color4 in the code.

My code:

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

But it doesn't work. I have tried for a long time to get this to work, so I would appreciate the help! Thanks.

Upvotes: 0

Views: 500

Answers (1)

Aleksander Stelmaczonek
Aleksander Stelmaczonek

Reputation: 1518

You have incorrect code for what you want to achieve, that is, there is a flaw in your logic(code).

$array['type'] does not exist and that's why switchColor always returns default colour + you are applying that colour in a wrong way.

To get what you want you should remove .data-table tbody tr:nth-child(odd) td and .data-table tbody tr:nth-child(even) td CSS rules(they are intended for different effect) and add following ones:

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

Next, on the line where you echo tr it should be like this:

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

This solution defines several CSS classes with different background styles. We choose which styling we want to apply by setting class attribute on tr tag. Previously, you had only one style and that one style was applied to all rows of your table.

Ah and function switchColor can be removed too.

More info:
https://www.w3schools.com/css/css_syntax.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Upvotes: 1

Related Questions