+ Start a Discussion
bujjibujji 

Regarding Pageblock table Row background color

Hi,

 

My Issue is like this i am displaying accounts and when ever i click on that account that entire ROW background color has to be set green. It is working fine but when i click on the 2nd Row the 1st Row background color should vanish.

 

But it displaying background color to all rows which ever i selected.Please fix it.

I am pasting the code here.

 

<apex:page standardController="Account" recordSetVar="act" sidebar="true" showHeader="false" wizard="false" tabStyle="Inv1__tab">
<apex:form id="accForm">
    <apex:pageBlock title="All Acounts" >
        <apex:pageMessage summary="Click on the account name" severity="info" strength="2"/>   
            <apex:pageBlockTable id="accTable" value="{!act}" var="a" onrowClick="show(this);">
                <apex:column headerValue="Account Name"><a href="#">{!a.Name}</a></apex:column>    
                <apex:column headerValue="Phone" >{!a.phone}</apex:column>
                <apex:column headerValue="Billing State/Province" >{!a.BillingState}</apex:column>
                <apex:column headerValue="Website" >{!a.Website}</apex:column>
            </apex:pageBlockTable>      
    </apex:pageBlock>
</apex:form>
<style>
.selectedDataRow {
    background-color: #ccffbb;
}
</style>
<script>
        function show(rowVar){               
        rowVar.className="selectedDataRow";
                
        }
</script>
</apex:page>

 

 

Thanks,

Bujji

Navatar_DbSupNavatar_DbSup

Hi,

Try the below code snippet as reference:

 

<apex:page standardController="Account" recordSetVar="act" sidebar="true" showHeader="false" wizard="false" >

<apex:form id="accForm">

    <apex:pageBlock title="All Acounts" >

        <apex:pageMessage summary="Click on the account name" severity="info" strength="2"/>  

            <apex:pageBlockTable id="accTable" value="{!act}" var="a" onrowClick="show(this);">

                <apex:column headerValue="Account Name"><a href="#">{!a.Name}</a></apex:column>   

                <apex:column headerValue="Phone" >{!a.phone}</apex:column>

                <apex:column headerValue="Billing State/Province" >{!a.BillingState}</apex:column>

                <apex:column headerValue="Website" >{!a.Website}</apex:column>

            </apex:pageBlockTable>     

    </apex:pageBlock>

</apex:form>

<style>

.selectedDataRow {

    background-color: #ccffbb;

}

 

</style>

<script>

var previousrrow='';

        function show(rowVar)

        {              

        var classname1=rowVar.className;

       rowVar.className="selectedDataRow";

       if(previousrrow=='')

       {

           previousrrow=rowVar;

       }

       else

       {

           if(previousrrow.innerHTML!=rowVar.innerHTML)

           {

               previousrrow.className=classname1;

               previousrrow=rowVar;

           }

       }

             

        }

</script>

</apex:page>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

 

bujjibujji

you are awesome man, exactly that is want i want.

Small thing when we click  on the account name can the same account name will display on the

<apex:pageMessage> block.It has to change dynamically according to the account name we click.

 

Thanks,

Baujji

raj123raj123

He can you please help me with the javascript to change the row colours on click , and change the prior selected row color to white. 

 

i am having hardtime working n this .

 

Thanks, 

in advance

BondicloudBondicloud
good code
thanks a lot
BondicloudBondicloud

Hi when i open my vfpage in apex:tab row background colour not working.  so what is the problem can any body suggest the solution. 

Shivani JainShivani Jain
Stuck with same problem pls help , If any one has come acrross the solution.
sunny522sunny522
Hi Bujji,
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.
Shivani JainShivani Jain
Solves the purpose thanks !!