conditional formatting on HTML table

Question

I have a HTML table

 <table border="1"> <tr bgcolor="#6699FF"> <th>Name</th> <th>DOJ</th> <th>BAU</th> </tr> <tr> <td>XXX</td> <<td>2015-06-03</td> <td>1</td> </tr> <tr> <td>YYY</td> <<td>2015-05-03</td> <td>2</td> </tr> <tr> <td>ZZZ</td> <<td>2015-04-03</td> <td>3</td> </tr> </table> 

` My requirement is if BAU (3rd column) is 1, then the corresponding DOJ (2nd column) cell will be in green color and so on. Im generating this report in linux. Is there any way to do this using CSS and HTML only. If not what is the other way?? Thanks in advance!

Answer 1

There is one way.

You can use data-* attributes.

Like this:

<!-- ... -->

<tr bgcolor="#6699FF">
    <th>Name</th>
    <th>DOJ</th>
    <th>BAU</th>
</tr>
<tr data-bau="1">
    <td>XXX</td>
    <td>2015-06-03</td>
    <td>1</td>
</tr>

<!-- ... -->

Then, on your CSS:

table tr[data-bau="1"] td:first-child + td {background:lightgreen;}
table tr[data-bau="2"] td:first-child + td {background:lightblue;}
table tr[data-bau="3"] td:first-child + td {background:lightyellow;}
/* ... */

---

Example:

 table tr[data-bau="1"] td:first-child + td {background:lightgreen;} table tr[data-bau="2"] td:first-child + td {background:lightblue;} table tr[data-bau="3"] td:first-child + td {background:lightyellow;} 

 <table border="1"> <tr bgcolor="#6699FF"> <th>Name</th> <th>DOJ</th> <th>BAU</th> </tr> <tr data-bau="1"> <td>XXX</td> <td>2015-06-03</td> <td>1</td> </tr> <tr data-bau="2"> <td>YYY</td> <td>2015-05-03</td> <td>2</td> </tr> <tr data-bau="3"> <td>ZZZ</td> <td>2015-04-03</td> <td>3</td> </tr> </table> 

---

If this is not an option, you can use the style attribute, when you generate the HTML:

 <table border="1"> <tr bgcolor="#6699FF"> <th>Name</th> <th>DOJ</th> <th>BAU</th> </tr> <tr> <td>XXX</td> <td style="background: lightgreen;">2015-06-03</td> <td>1</td> </tr> <tr> <td>YYY</td> <td style="background: lightblue;">2015-05-03</td> <td>2</td> </tr> <tr> <td>ZZZ</td> <td style="background: lightyellow;">2015-04-03</td> <td>3</td> </tr> </table> 

Answer 2

No, it isn't.

Neither CSS or HTML provide any means to format based on the value of text nodes.

You need a programming language to do this. You should probably use whatever programming language you are writing your Linux application in and add it as a feature of that application.