I would like to make my table more viewable. My table will be created from a database. And it's simple like:
Test1 | Test2 ...
---------------
Yes | No ...
Yes | Yes ...
No | Yes ...
Yes | No ...
And I want that all Yes'es are green and all No's are red.
The entries of the table will be created by a foreach loop.
I have an example but I used array instead because it's easier to show the problem. But I think it's the same principle. (I only tested the first row)
<!DOCTYPE html>
<html>
<body>
<?php
$contacts = array('N', 'J', 'N', 'N', 'J');
$demo_str = 'J';
?>
<table style="border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 5px 5px 5px #dfdfdf;" >
<thead>
<tr>
<td style="width: 180px;">Test1</td>
<td style="width: 105px;">Test2</td>
<td style="width: 100px;">Test3</td>
<td style="width: 80px; ">Test4</td>
<td style="width: 80px; ">Test5</td>
<td style="width: 98px; ">Test6</td>
</tr>
</thead>
<tbody>
<?php foreach ($contacts as $contact): ?>
<tr>
<td><?php if ($demo_str == $contact) {
echo "<html>
<head>
<style>
.redifnull1 {
color: green;
}
</style>
</head>
</html>";
}
else {
echo "<html>
<head>
<style>
.redifnull1 {
color: red;
}
</style>
</head>
</html>";
};
?><strong ><?=$contact['test1']?></strong></td>
<td><?=$contact['test2']?></td>
<td><?=$contact['test3']?></td>
<td><?=$contact['test4']?></td>
<td><?=$contact['test5']?></td>
<td><?=$contact['test6']?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>
And the problem is, that it only compare with "$contacts = array('N', 'J', 'N', 'N', --->'J'<---);", so with the last "letter" and everything is green, if the last one is "N" everything is red.
Does anyone knows how a can solve this problem? Thank you very much,
best
CodePudding user response:
Creating different <style>
blocks doesn't work like this. All the styles in the page are merged, and the last style for a selector takes precedence.
You also can't have multiple <html>
and <head>
tags in a document. You're creating new ones each time through the loop.
Instead, create a single style block that defines two classes, redifnull
and greenifnull
. Then use the appropriate class in your table rows.
<!DOCTYPE html>
<html>
<head>
<style>
.rediffnull {
color: red;
}
.greenifnull {
color: green;
}
</head>
<body>
<?php
$contacts = array('N', 'J', 'N', 'N', 'J');
$demo_str = 'J';
?>
<table style="border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 5px 5px 5px #dfdfdf;" >
<thead>
<tr>
<td style="width: 180px;">Test1</td>
<td style="width: 105px;">Test2</td>
<td style="width: 100px;">Test3</td>
<td style="width: 80px; ">Test4</td>
<td style="width: 80px; ">Test5</td>
<td style="width: 98px; ">Test6</td>
</tr>
</thead>
<tbody>
<?php foreach ($contacts as $contact): ?>
<tr>
<td>
<td><strong greenifnull" : "redifnull" ?>"><?=$contact['test1']?></strong></td>
<td><?=$contact['test2']?></td>
<td><?=$contact['test3']?></td>
<td><?=$contact['test4']?></td>
<td><?=$contact['test5']?></td>
<td><?=$contact['test6']?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>
CodePudding user response:
Try it like this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.green { color: green; }
.red { color: red; }
</style>
</head>
<body>
<?php
$contacts = array('N', 'J', 'N', 'N', 'J');
$demo_str = 'J';
?>
<table style="border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 5px 5px 5px #dfdfdf;" >
<thead>
<tr>
<td style="width: 180px;">Test1</td>
<td style="width: 105px;">Test2</td>
<td style="width: 100px;">Test3</td>
<td style="width: 80px; ">Test4</td>
<td style="width: 80px; ">Test5</td>
<td style="width: 98px; ">Test6</td>
</tr>
</thead>
<tbody>
<?php foreach ($contacts as $contact): ?>
<tr>
<td>
<strong ><?=$contact['test1']?></strong>
</td>
<td><?=$contact['test2']?></td>
<td><?=$contact['test3']?></td>
<td><?=$contact['test4']?></td>
<td><?=$contact['test5']?></td>
<td><?=$contact['test6']?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</body>
</html>