I have a table that is populated from a query using PDO. One of the columns (FLAG_CLOSED) I return from the query is what drives the color change. What I need to do, is change the background color of a based on the value of the column. The value can be 'Y','N', or empty. Below is a snippet of the table (I left out the header row) and what I've tried so far. I didn't think this would work but it's all I could think of at the moment. I'm not opposed to Javascript I just couldn't think of how to manipulate the dom in a way to accomplish what I need. any help is appreciated! thanks in advance.
<tbody>
<tr data-flag=<?php $sub_data['FLAG_CLOSED']?>> //also tried putting quotes around the php
<td><?php echo ($sub_data['SEQ'])?></td>
<td><?php echo ($sub_data['PART'])?></td>
<td><?php echo ($sub_data['LMO'])?></td>
<td><?php echo ($sub_data['UM'])?></td>
<td><?php echo ($sub_data['HOURS_ESTIMATED'])?></td>
<td><?php echo ($sub_data['HOURS_ACTUAL'])?></td>
<td><?php echo ($sub_data['DATE_START'])?></td>
</tr>
</tbody>
CSS:
tr [data-flag="Y"]{
background-color: green;
}
tr [data-flag="N"]{
background-color: red;
}
Table: Example table with data
I think you need to have the quotes around the php in the tr tag
Change the CSS to:
tr[data-flag="Y"]{
background-color: green;
}
tr[data-flag="N"]{
background-color: red;
}
Notice there isn't a space between the tag and data selector
I set an ID on the TR and then targeted the ID in CSS: HTML:
<tr id="<?php echo $sub_data['FLAG_CLOSED'];?>"> // evals to Y, N, or empty
CSS:
#Y{background-color: green;}
As far as the code you have posted, the issue is one of rendering, and not one of CSS.
You have two typos in what you have posted.
First, in your HTML, you need to wrap your <tbody> in a <table> tag (which I assume you are doing, but didn't include here for reasons of clarity, which is fine.) Secondly, the space between your selectors in your CSS in your initial question was incorrect.
CSS cares about whitespace, and the selector comes as a modifier to your initial lookup.
tr[data-flag="Y"] {
background-color: green;
}
tr[data-flag="N"] td {
background-color: red;
}
This will work because the filter (the part in the brackets) from the tr knows to apply to your tr element. Otherwise writing it like tr [] will remove that logic. You were on the right track initially, but had a dastardly whitespace issue. Your ID method (as posted in your response) will not work as well with having multiple rows selected yes or no, since IDs are supposed to be unique.