CODEWITHSUNDEEP
htmlcss
Hasain
Hasain

Reputation: 41

conditional formatting on HTML table

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!

Upvotes: 2

Views: 21033

Answers (2)

Ismael Miguel
Ismael Miguel

Reputation: 4241

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>

Upvotes: 5

Quentin
Quentin

Reputation: 943578

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.

Upvotes: 1

Related Questions