+ Start a Discussion
Shivani JainShivani 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>
Best Answer chosen by Shivani Jain
sunny522sunny522
Hi Shivani,
 
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.