Apex Code Development You need to sign in to do that
Don't have an account?
Shivani Jain Change row color of pageBlockTable row on click (Button), one row at a time
Hi
I have a requirement where user can match diffrent say A's to B's in a pageBlockTable with a button , I just want to highlight which Match was selected .
Currently it does that but when u make a different selection that to gets highlighted , I want original one to return in previous color.
PPPHEWWWWWWWWWW...
not working guyzz pls help
code is :
<style>
.selectedDataRow {
background-color: skyblue;
}
.normal{
}
</style>
<script>
function updateRowColor(row) {
if(row.className.indexOf(' selectedDataRow') < 0) {
row.className = row.className + ' selectedDataRow'
} else {
classes = row.className.split(' ')
for(var x in classes) {
if(classes[x] == 'selectedDataRow') {
classes[x] = classes[0]
classes.shift()
}
}
row.className = classes.join(' ')
}
}
</script>
PAGE :
<apex:pageBlock title="Care Receivers">
<apex:pageBlockTable value="{!ReceiverAvail}" var="cr" border="1" onRowClick="updateRowColor(this)">
<apex:column value="{!cr.Name}" />
<apex:column value="{!cr.Phone}"/>
<apex:column value="{!cr.PersonEmail}"/>
<apex:column value="{!cr.Primary_Services_Needed__c}"/>
<apex:column value="{!cr.Secondary_Services_Needed__c}"/>
<apex:column value="{!cr.CR_Family_smokes_inside_the_home__c}"/>
<apex:column value="{!cr.CR_has_pet__c}"/>
<apex:column >
<apex:commandButton value="Match" reRender="myPageBlockPanel,assignPanel,volAssignPb" action="{!match}">
<apex:param name="crId" assignTo="{!crId}" value="{!cr.Id}" />
</apex:commandButton>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
I have a requirement where user can match diffrent say A's to B's in a pageBlockTable with a button , I just want to highlight which Match was selected .
Currently it does that but when u make a different selection that to gets highlighted , I want original one to return in previous color.
PPPHEWWWWWWWWWW...
not working guyzz pls help
code is :
<style>
.selectedDataRow {
background-color: skyblue;
}
.normal{
}
</style>
<script>
function updateRowColor(row) {
if(row.className.indexOf(' selectedDataRow') < 0) {
row.className = row.className + ' selectedDataRow'
} else {
classes = row.className.split(' ')
for(var x in classes) {
if(classes[x] == 'selectedDataRow') {
classes[x] = classes[0]
classes.shift()
}
}
row.className = classes.join(' ')
}
}
</script>
PAGE :
<apex:pageBlock title="Care Receivers">
<apex:pageBlockTable value="{!ReceiverAvail}" var="cr" border="1" onRowClick="updateRowColor(this)">
<apex:column value="{!cr.Name}" />
<apex:column value="{!cr.Phone}"/>
<apex:column value="{!cr.PersonEmail}"/>
<apex:column value="{!cr.Primary_Services_Needed__c}"/>
<apex:column value="{!cr.Secondary_Services_Needed__c}"/>
<apex:column value="{!cr.CR_Family_smokes_inside_the_home__c}"/>
<apex:column value="{!cr.CR_has_pet__c}"/>
<apex:column >
<apex:commandButton value="Match" reRender="myPageBlockPanel,assignPanel,volAssignPb" action="{!match}">
<apex:param name="crId" assignTo="{!crId}" value="{!cr.Id}" />
</apex:commandButton>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
Go through the example below
<apex:page standardController="Account" recordSetVar="accounts" sidebar="false">
<style>
.rowColor {
background-color:orange;
}
</style>
<script>
var pRow='';
function highlightElem(a) {
var c=a.className;
// alert(c);
a.className="rowColor";
if(pRow==''){
pRow=a;
}
else {
if(pRow.innerHTML!=a.innerHTML) {
pRow.className=c;
pRow=a;
}
}
}
</script>
<apex:form >
<apex:pageBlock >
<apex:PageBlockTable value="{!accounts}" var="r" onRowClick="highlightElem(this)" >
<apex:column value="{!r.Name}" />
<apex:column value="{!r.Phone}" />
<apex:column value="{!r.Type}" />
</apex:PageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.