+ Start a Discussion
SandrineSandrine 

Highlighting a row of a Table

Hello,

I have code below which highlights the Column, but I want the entire Row to be highlighted.
 
<apex:pageBlockTable value="{!pMap}" var="key" >       
   <apex:column headerValue="name" onmousemove="this.style.backgroundColor='#7FFFD4'" onmouseout="this.style.backgroundColor =''" >     
                <apex:outputText value="{!pMap[key].name}" /> 
   </apex:column>      
   <apex:column headerValue="Postal Code">                 
                {!pMap[key].postalCode}
   </apex:column>   
</apex:pageBlockTable>

Thank you for suggestion !
Best Answer chosen by Sandrine
Amit Chaudhary 8Amit Chaudhary 8
Please try below code. I hope that will help you

Example 1 :-
<script>
var lastRow;
function highlight(elem){
    if(lastRow != undefined)
        lastRow.style.backgroundColor = 'white';

    elem.style.backgroundColor = 'yellow';
    lastRow = elem;
}
</script>

<apex:pageBlock>
<apex:pageBlockTable value="{!list1}" var="item" rules="rows" id="myTable1" onRowClick="highlight(this);">
    <apex:column value="{!item.id}"/>
    <apex:column value="{!item.name}"/>
</apex:pageBlockTable>    
</apex:pageBlock>
Example 2:-
https://developer.salesforce.com/forums/?id=906F0000000997AIAQ

Example 3:-
http://salesforce.stackexchange.com/questions/12049/method-to-highlight-a-single-row-in-an-apexdatatable
<apex:page Controller="account_multicolor" >
<style>
.value{
background-color: #FCF7F7;}
</style>
<apex:dataTable value="{!account_val}" var="acc" rowclasses="">
<apex:column headervalue="Id" value="{!acc.Id}" style="{!IF((acc.name ='TEST'),"background-color: #0000FF;","")}"/>
<apex:column headervalue="name" value="{!acc.name}" style="{!IF((acc.name ='TEST'),"background-color: #0000FF;","")}"/>
</apex:dataTable>
</apex:page>
Please let us know if this will help you

Thanks
Amit Chaudhary

All Answers

SarisfdcSarisfdc
Hope following document will help you.
http://salesforce.stackexchange.com/questions/31380/highlight-single-selected-row-in-table

Thanks!
Amit Chaudhary 8Amit Chaudhary 8
Please try below code. I hope that will help you

Example 1 :-
<script>
var lastRow;
function highlight(elem){
    if(lastRow != undefined)
        lastRow.style.backgroundColor = 'white';

    elem.style.backgroundColor = 'yellow';
    lastRow = elem;
}
</script>

<apex:pageBlock>
<apex:pageBlockTable value="{!list1}" var="item" rules="rows" id="myTable1" onRowClick="highlight(this);">
    <apex:column value="{!item.id}"/>
    <apex:column value="{!item.name}"/>
</apex:pageBlockTable>    
</apex:pageBlock>
Example 2:-
https://developer.salesforce.com/forums/?id=906F0000000997AIAQ

Example 3:-
http://salesforce.stackexchange.com/questions/12049/method-to-highlight-a-single-row-in-an-apexdatatable
<apex:page Controller="account_multicolor" >
<style>
.value{
background-color: #FCF7F7;}
</style>
<apex:dataTable value="{!account_val}" var="acc" rowclasses="">
<apex:column headervalue="Id" value="{!acc.Id}" style="{!IF((acc.name ='TEST'),"background-color: #0000FF;","")}"/>
<apex:column headervalue="name" value="{!acc.name}" style="{!IF((acc.name ='TEST'),"background-color: #0000FF;","")}"/>
</apex:dataTable>
</apex:page>
Please let us know if this will help you

Thanks
Amit Chaudhary
This was selected as the best answer