+ Start a Discussion

Highlighting the selected coloum


I created vf page

i have some opportunities,

opportunity names are command links

in the click of opportunity name am poupalting the related objects records

when i click the opportunity name i want highlight the row

how can i do it

i use some jquerys but it applying for entire pagebloc table

i want highlight only selected opprtunity name


here is the my code can any one tel  me where am doing mistake.



datahighlight {
       background-color:pink !important;


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

             <apex:pageBlock mode="inlineEdit"  rowClasses="datahighlight">
                         <apex:pageBlockTable value="{!opp}" var="op">
                            <apex:column headerValue="Opportunity Name">
                             <apex:outputPanel >
                             <apex:commandLink action="{!request}" value="{!op.name}" >
                             <apex:param value="{!op.id}" name="abc" ></apex:param>
                             <apex:column headerValue="Company Name">
                            <apex:outputField value="{!op.AccountId}">
                            <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"  
                hideOnEdit="editButton" event="ondblclick"  
                    changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>


Can any one help me.




Rahul SharmaRahul Sharma
By saying $('.dataRow'), you are actually referring to an element having class as dataRow.

But I could not see any of the component in your page which has that class. Try giving class(style class for visualforce components) to desired component(visualforce Tag).

It can be possible using a string variable, little bit logic of If condition and CSS.


firstly decalre a varible in a class like -

public string selectOppId{get;set;}


now in visual force page declare CSS



background-color: gray;






now in a <apex:column> you can write -

<apex:column headerValue="Opportunity Name" sytleclass="{!if(selectOppId==op.id, selected, nonSelected)}">


And on selected of any column invoke a method & pass OPP id (using action function) to class and assign the selected id to selectOppId variable.

then rerender the pertuclar portion.


NOTE: Please if you satisfied then mask as solution for  help of other users.


Thank you.

Raj Jha