CODEWITHSUNDEEP
phpmysql
user3024047
user3024047

Reputation: 3

How can I style a a table according to a value coming from SQL database?

I'm making a very tiny and simple tickiting system for my repair shop, its just an HTML page with a form to record the cutomer information and a SQL database and a page to show data.

in the page that shows the data, the maintenance guy will have make change on some fields to show the progress of the case. I want to change the color of a row in the table according to the progress.

for example, I want a row colored green when the maintenance guy sets progress to Done state .

I tried everything I know in PHP and couldn't solve so please tell where to search about that ... Thanks in Advance :)

Upvotes: 0

Views: 45

Answers (1)

Brad Newers
Brad Newers

Reputation: 23

You can create style in css for every class (for each status). Define class style for Done, In-Progress etc.. Then, add class to each row of data according to the status.

.done{
  background-color: green;
}
.notdone{
  background-color: red;
}
.inprogress{
  background-color: yellow;
}
<table border="1">
  <tr class="done"><td>Reading 1 Jurnal</td><td>Done</td></tr>
  <tr class="done"><td>Reading 10 Jurnal</td><td>Done</td></tr>
  <tr class="done"><td>Reading 50 Jurnal</td><td>Done</td></tr>
  <tr class="notdone"><td>Reading 100 Jurnal</td><td>Not Done</td></tr>
  <tr class="done"><td>Write Literature Review of 10 Jurnal</td><td>Done</td></tr>
  <tr class="inprogress"><td>Write Literature Review of 50 Jurnal</td><td>In-Progress</td></tr>
  <tr class="notdone"><td>Write Critical Review of 50 Jurnal</td><td>Not Done</td></tr>
  <tr class="notdone"><td>Write Critical Review of 100 Jurnal</td><td>Not Done</td></tr>
</table>

You can use add class using (jquery) e.g.

$(selector).addClass("done");

or if you do not want to use jquery, you can add it using php, e.g.

<?php
 if($row[$i][1]=="Done"){ $class="done";}
 else if($row[$i][1]=="In Progress"){ $class="inprogress";}
 else if($row[$i][1]=="Not Done"){ $class="notdone";}
 ?>

 <tr class="<?php $class;?>"><td>Reading 1 Jurnal</td><td>Done</td></tr>

Where:

  • $row[$i] is expected data from database
  • that code were in loop of data
  • Both <td> is supposedly data from database (assume you already get from database)

Upvotes: 1

Related Questions