2

I'm just having a play around with a basic table with input from a form on another page.

I want to change the CSS of table in depending on the result of the game.

If the home team wins I want the background colour of the row to be gree if they loose then red, otherwise remain the same.

So I figured I'd need to use IF and ELSES, however not quite sure how to integrate that with CSS and where to put it.

I'm still very new with PHP.

<html>
 <head>
 <title>Player Stats</title>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
  </head>

<body>

<h1>Player Stats</h1><br>
</br>
<h3>Results</h3><br>
</br>

<table>
  <tr>
    <th>Home team</th>
    <th>Away team</th>   
    <th>Score</th>
    <th>Venue</th>
 <tr>
    <td><?php echo $_POST["home"]; ?></td>
    <td><?php echo $_POST["away"]; ?></td>
    <td><?php echo $_POST["goalsh"]; ?> - <?php echo $_POST["goalsa"]; ?></td>
    <td><?php echo $_POST["formGender"]; ?></td>
  </tr>

</table>   
<br>
</br>


<a href="http://chrispaton.xyz/update.php">Update player stats</a>
</body>
</html>
3
  • Write the styles inside the PHP and echo the CSS you wanted, according to the condition. Commented Sep 27, 2016 at 4:02
  • You set the class based on your condition. You don't output CSS any differently. Commented Sep 27, 2016 at 4:07
  • But I'd need to calculate the difference between $_POST["goalsh"] and $_POST["goalsa"] though, right? I.e. if $_POST["goalsa"] > $_POST["goalsh"] then CSS would display red background. Commented Sep 27, 2016 at 4:08

1 Answer 1

1

One way would be to make two classes, red and green.

.red{ background-color: red }
.green{ background-color: green } 

You could do something like,

<tr class="<?= (!($_POST["goalsa"] > $_POST["goalsh"])) ? 'green' : (($_POST["goalsa"] > $_POST["goalsh"])? 'red' : '') ?>" />
Sign up to request clarification or add additional context in comments.

4 Comments

Sorry just to add orange in for a draw, I seem to be going wrong there. I just added another condition to the same line, but looks like I have missed something out. <tr class="<?= (!($_POST["goalsa"] > $_POST["goalsh"])) ? 'green' : (($_POST["goalsa"] > $_POST["goalsh"])? 'red' : (($_POST["goalsa"] == $_POST["goalsh"])? 'orange'') ?>" />
Add this. <?= (!($_POST["goalsa"] > $_POST["goalsh"])) ? 'green' : (($_POST["goalsa"] > $_POST["goalsh"])? 'red' : (($_POST["goalsa"] == $_POST["goalsh"]) ? 'orange' : ' ')) ?>
No it still doesn't like that... here is the full line I have! It was working perfect before I entered the orange. <tr class="<?= (!($_POST["goalsa"] > $_POST["goalsh"])) ? 'green' : (($_POST["goalsa"] > $_POST["goalsh"])? 'red' : (($_POST["goalsa"] == $_POST["goalsh"]) ? 'orange' : ' ')) ?> </tr>
<tr class="<?= (($_POST["goalsa"] == $_POST["goalsh"])) ? 'orange' : (($_POST["goalsa"] > $_POST["goalsh"])? 'red' : (!($_POST["goalsa"] > $_POST["goalsh"]) ? 'green' : ' ')) ?> </tr>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.