PHP Change row colour in a table depending on the string

Question

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.

Most likely this is not a php issue, but an issue with correctly applying css to html. You need to post the generated html code, not the php code. — arkascha
– arkascha, Commented Mar 28, 2018 at 15:35
The $array is not meant to be there, that was me testing. It is supposed to be $result. — Arny
– Arny, Commented Mar 28, 2018 at 15:36

Aleksander Stelmaczonek · Accepted Answer · 2018-03-28 15:55:49Z

1

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

answered Mar 28, 2018 at 15:55

Aleksander Stelmaczonek

1,5981 gold badge25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aleksander Stelmaczonek Over a year ago

Glad it worked. :) However, @Arny please, mark it as accepted answer so everyone knows your issue is resolved. More info here: meta.stackexchange.com/questions/5234/…

Collectives™ on Stack Overflow

PHP Change row colour in a table depending on the string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related