Tag Archives: PageBlockTable

Highlight Selected Row in a table in Visualforce Page

Here is an example to highlight the selected row in a page block table in visualforce page. To do this add the below code snippet to your visualforce page to highlight the selected row color among the rest of the rows in same page block table.

Visualforce Page:

<apex:page standardController="Account" recordSetVar="Accounts" sidebar="false" showHeader="false">  
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>  
    <style>
        .ui-state-active{
        border: 1px solid #fbd850;
        background: rgb(199,199,199);
        font-weight: bold;
        color: #eb8f00;
        }
    </style> 
    <script>  
    function highlightRow(row){  
        $('tr').removeClass('ui-state-active');  
        $(row).parent().addClass('ui-state-active');  
    }  
    </script>  
    <apex:form >  
        <apex:pageBlock >  
            <apex:pageBlockTable value="{!accounts}" var="a">  
                <apex:column value="{!a.Name}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.AccountNumber}" onclick="highlightRow(this)"/>
                <apex:column value="{!a.Type}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.Industry}" onclick="highlightRow(this)"/>  
                <apex:column value="{!a.Phone}" onclick="highlightRow(this)"/>  
            </apex:pageBlockTable>  
        </apex:pageBlock>  
    </apex:form>    
</apex:page>  

Output:

Note: If you want to change the Highlighted color, you can write your won style class.

Dynamically Add Rows in Apex PageBlockTable

Controller:

public class Sample{
    
    Account acc = new Account();
    public List<Account> accList { get; set; }
    
    public Sample()
    {
        accList = new List<Account>();
        accList.add(acc);
    }
    
    Public void addAccount()
    {
        Account ac = new Account();
        accList.add(ac);
    }
}

Visualforce Page:

<apex:page Controller="Sample">
    <apex:form>
        <apex:pageBlock id="pbAcc">
            <apex:pageblockSection >
                <apex:pageBlockTable value="{!accList}" var="acc">
                    <apex:column headerValue="Account Name">
                        <apex:inputField value="{!acc.Name}"/>
                    </apex:column>
                    <apex:column headerValue="Account Number">
                        <apex:inputField value="{!acc.AccountNumber}"/>
                    </apex:column>
                    <apex:column headerValue="Account Type">
                        <apex:inputField value="{!acc.Type}"/>
                    </apex:column>
                    <apex:column headerValue="Industry">
                        <apex:inputField value="{!acc.Industry}"/>
                    </apex:column>
                </apex:pageBlockTable>
                <br/><apex:commandLink value="Add Row" action="{!addAccount}" reRender="pbAcc"/>   
            </apex:pageblockSection>        
            <apex:pageblockSection columns="1" >
                <apex:pageblockSectionItem >
                    <apex:commandButton value="Save" />
                    <apex:commandButton value="Cancel" />
                </apex:pageblockSectionItem>         
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output: