You need to sign in to do that
Don't have an account?
Help with changing background color in HTML cell table based on condition
Hello all,
I have created a sortable table using the jquery tablesort plugin and I am having trouble figuring out how to change a cell background color in the table I'm creating based on a condition. Using <td style=background:..." works as setting a static color, but this isn't what I need. I am trying to get this working on the test_stat_c cells. Since it is a number I am trying to accomplish this condition {!IF(u.test_stat__c < 4 ,'#7CFC00', '#FFA07A')}">
I've tried putting it in several places inside the repeat segment, but not having any luck. Is it even possible? Would I have to write something into the <script> for this to work? I need to use the tablesorter for obvious reasons. I've tried searching around, but all I could find were resources to accomplish this using pageblock tables.
Thank you for your help,
Les
and the code:
<apex:page standardController="stat_page__c" standardstylesheets="true" sidebar="false" > <apex:stylesheet value="{!URLFOR($Resource.jquerySort, 'js/themes/blue/style.css')}" /> <apex:stylesheet value="{!URLFOR($Resource.jquerySort, 'css/ui-lightness/jquery-ui-1.8.6.custom.css')}" /> <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jquerySort, 'js/jquery-latest.js')}"></script> <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jquerySort, 'js/jquery.tablesorter.min.js')}"></script> </style> <apex:form > <apex:sectionHeader title="for stats" /> <apex:outputPanel id="js"> <script language="javascript" type="text/javascript"> var j$ = jQuery.noConflict(); function Loading(b){ if(b){ j$('.loadingIcon').removeClass('hideIt'); }else{ j$('.loadingIcon').addClass('hideIt'); } } j$(document).ready(function(){ j$("#tableToSort").tablesorter({ headers: { 0: {sorter: 'text'}, 1: {sorter: 'digit'}, 2: {sorter: 'digit'}, 3: {sorter: 'digit'} } }); }); </script> </apex:outputPanel> <apex:outputPanel id="table"> <table id="tableToSort" class="tablesorter" border="0" cellpadding="0" cellspacing="1"> <thead class="rich-table-thead"> <tr class="headerRow"> <th colspan="1" scope="col">Agent</th> <th colspan="1" scope="col">First Break</th> <th colspan="1" scope="col">Lunch Break</th> <th colspan="1" scope="col">Second Break</th> <th colspan="1" scope="col">test stat</th> </tr> </thead> <tbody> <apex:repeat value="{!agent_page__c.reps__r}" var="u"> <tr class="dataRow"> <td><apex:outputLink value="/{!u.id}" target="_Blank">{!u.name}</apex:outputLink></td> <td align="center">{!u.first_break__c}</td> <td>{!u.lunch_break__c}</td> <td>{!u.second_break__c}</td> <td>{!u.test_stat__c}</td> </tr> </apex:repeat> </tbody></table> </apex:outputPanel> </apex:form> </apex:page>
Can you not simply move the style attribute and the embedded condition to the td element?
All Answers
Are you trying to change the colour in response to a user's action, or generate the table with colours that are dynamically determined at load time.
I knew I was forgetting something, thank you for that. I am attempting to generate the table with colours that are dynamically determined at load time. I don't have a need for any of these fields to be editable. Thank you :)
OK! I found a way to make it work, but it doesn't take up the entire cell... It merely highlights the number displayed. I'll work this for now, but anyone could tell me how to highlight the cell using this condition I would be very thankful!
Here is how I did it:
Can you not simply move the style attribute and the embedded condition to the td element?
And that's what I was missing! Before I did throw in the "td style="...", but did not include the output text afterwards. That did exactly what I was hoping to do! Thank you very much!
<td style="text-align:right; background-color:{!IF(c =='0','#799c54','#c25454')}" >
In above line i have to add (If c>0 && c <=2) and also c<2 ?
<td align="center" style="background-color:{!IF(st.s_pTimeUnavail__c < 5, '#C6EFCE', IF(AND(st.s_pTimeUnavail__c >= 5, st.s_pTimeUnavail__c <= 10), '#FFEB9C', '#FFC7CE'))}">
Does that help you at all?