You need to sign in to do that
Don't have an account?

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.
<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.
Thx