+ Start a Discussion
lscAllClearlscAllClear 

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>

 

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

Can you not simply move the style attribute and the embedded condition to the td element?

 

<td style="background-color:{!IF(u.test_stat__c < 4,'#7CFC00', '#FFA07A')}"><apex:outputText  value="{!u.test_stat__c}"></apex:outputText></td>

 

All Answers

bob_buzzardbob_buzzard

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.

 

lscAllClearlscAllClear

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 :)

lscAllClearlscAllClear

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:

<td><apex:outputText style="background-color:{!IF(u.test_stat__c < 4,'#7CFC00', '#FFA07A')}" value="{!u.test_stat__c}"></apex:outputText></td>

 

bob_buzzardbob_buzzard

Can you not simply move the style attribute and the embedded condition to the td element?

 

<td style="background-color:{!IF(u.test_stat__c < 4,'#7CFC00', '#FFA07A')}"><apex:outputText  value="{!u.test_stat__c}"></apex:outputText></td>

 

This was selected as the best answer
lscAllClearlscAllClear

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!

Adil_SFDCAdil_SFDC
What happens for multiple cases. For example
<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  ?
lscAllClearlscAllClear
It just works...  I did this on another line with:

<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?
Adil_SFDCAdil_SFDC
Worked . I was using AND instead of OR . My Bad. Thanks