function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ramin MohammadiRamin Mohammadi 

Conditionally styling tables.

<apex:page standardcontroller="Account" Extensions="whitespace" >
<head>

<style>
    table{
    padding: 0;
    border : 2px solid rgb(0,96,156);
    }
    
    .list{
    list-style-type:none;
    padding-left:0;
    
    width:150px;
    text-align:left;    
    }
    
    th{
    background-color:rgb(237,28,36);
    color: white;
    height: 50px;
    width:150px;
    padding-left:10;
    border : 1px solid rgb(90,104,112);
    font-weight: Bold;
    font-size: 16px;   
    
    }
    
    td.datafields{
    height: 50px;
    width:150px;
    text-align:left;
    padding-left:10;
    border : 1px solid rgb(0,96,156);
    font-weight: Bold;
    color: rgb(90,104,112);
    font-size: 12;
   
    }
    td.filled{
    height: 50px;
    width:150px;
    text-align:left;
    padding-left:10;
    border : 1px solid rgb(0,96,156);
    font-weight: Bold;
    color: white;
    font-size: 12;
    background-color:green;
   
    }
    td.accountName{
    color:white;
    background-color:rgb(90,104,112);
    font-size:14px;
    height: 50px;
    width:150px;
    text-align:left;
    padding-left:10;
    border : 1px solid rgb(90,104,112);
    font-weight: Bold;
    }
</style>
    <apex:includeScript value="{!URLFOR($Resource.jquery_1_10_2)}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery_UI)}" />
    <apex:styleSheet value="{!URLFOR($Resource.jQueryUI_Css)}" />
    
<script>   
    $(document).ready(function() {
          $('#entry').each(function() {
                var entry = $(this).text();
                for (entry i = 0; i <entry.length; i++){
                    if((entry[i] != ''){
                        $("#cell").addClass("td.filled");
                        $("#cell").removeClass("td.datafield");

                    });
                return false;
              });
</script>


</head>

<apex:form >

<table frame="box" width="100%" id ="DataTable">
        <tr>
            <th> Account Site </th>
            <th> Payments</th>
            <th> Cash Management</th>
            <th> Financial Messaging</th>
            <th> Merchant Services</th>
        </tr>
    <apex:repeat value="{!IPlist}" var="p">
        <tr>    
            <td class="accountName">
                <apex:outputText value="{!p.Name}" />
            </td>
            <td class="datafields" id ="cells">    <!-- Need this td to be conditionally highlighted-->
                <apex:datalist value="{!p.Product_Releases_del__r}" var="prod" styleClass="list" >
                    <apex:outputText id="entry" rendered="{!prod.Product_Family__c== "ACHplus"|| prod.Product_Family__c=="CLS"|| prod.Product_Family__c=="Global PAYplus"||
                    prod.Product_Family__c== "BSA" || prod.Product_Family__c== "CLS" || prod.Product_Family__c== "FaxWire"|| prod.Product_Family__c=="GFXWeb"
                    || prod.Product_Family__c== "Global Payments" || prod.Product_Family__c== "Global Payments SP" || prod.Product_Family__c=="Originet"
                    || prod.Product_Family__c== "PARC PAYplus Connect"|| prod.Product_Family__c=="PARC PAYplus USA" || prod.Product_Family__c=="PAYplus Connect/GFX"
                    || prod.Product_Family__c=="PAYplus USA"|| prod.Product_Family__c=="PARC"|| prod.Product_Family__c=="Payment Archive Manager"|| prod.Product_Family__c=="WebACH"}"
                    value="{!prod.Product_Family__c}"   />   <!-- Based on this output being present-->             
                </apex:datalist>
            </td>
            <td class="datafields" id ="cells">
               <apex:datalist value="{!p.Product_Releases_del__r}" var="prod" styleClass="list">
                   <apex:outputText  id="entry" rendered="{!prod.Product_Family__c=="ACCESS"|| prod.Product_Family__c=="Banker"|| prod.Product_Family__c=="Banker Web Client (BWC)"
                   || prod.Product_Family__c=="Global CASHplus"|| prod.Product_Family__c=="CASHplus"|| prod.Product_Family__c=="webACCESS"|| prod.Product_Family__c=="webACCESS ACH"}"
                   value="{!prod.Product_Family__c}"/>  
               </apex:datalist>
            </td>
            <td class="datafields" id ="cells">
               <apex:datalist value="{!p.Product_Releases_del__r}" var="prod" styleClass="list">
                   <apex:outputText id="entry" rendered="{!prod.Product_Family__c=="IGTplus"|| prod.Product_Family__c=="IGTplus Compliance                       Filter"|| prod.Product_Family__c=="TurboSwift"
                   || prod.Product_Family__c=="Clarity"|| prod.Product_Family__c=="TurboFileAct"|| prod.Product_Family__c=="Datasphere"|| prod.Product_Family__c=="MessagePro"|| prod.Product_Family__c=="GMP"}"
                   value="{!prod.Product_Family__c}"/> 
               </apex:datalist>
            </td>
            <td class="datafields" id ="cells">
               <apex:datalist value="{!p.Product_Releases_del__r}" var="prod" styleClass="list">
                   <apex:outputText id="entry" rendered="{!prod.Product_Family__c=="PaymentsHQ"||prod.Product_Family__c=="Bacsactive-IP"||prod.Product_Family__c=="PayAway"
                   ||prod.Product_Family__c=="NetDeposit"||prod.Product_Family__c=="DepositNow"||prod.Product_Family__c=="Same Day Pay"||prod.Product_Family__c=="Mobilescape"
                   ||prod.Product_Family__c=="RDC"|| prod.Product_Family__c=="IP"|| prod.Product_Family__c=="RDC/IP"|| prod.Product_Family__c=="Merchants"}" value="{!prod.Product_Family__c}"/> 
               </apex:datalist>           
            </td>            
        </tr>
    </apex:repeat>
</table>

</apex:form>
</apex:page>


I have this VF/JQuery that I am using to create an html table that contains different lists. These lists render based on certain criteria. I am trying to write a jquery that will change the <td> entries background color to green, while keeping the empties white. If anyone can tell me what I'm doing wrong, I will be grateful.
William TranWilliam Tran
what is the issue? everything is white? everything is green? something else? 

Thx
Ramin MohammadiRamin Mohammadi
Everything is white. It has to do with the jquery. I’m debugging it right now