I have a table with rows, i want to highlight the selected row to do some actions on it. I used onRowClick and give it background color, but if i click on anothe row, it highlight two rows .. how to clear the last style or just highlight single row !

here is my code in VF

<apex:pageBlockTable id="countriesTable" 
                     value="{!Countries}" 
                     var="c" 
                     onRowClick="style.backgroundColor='yellow'" >

screenshot enter image description here

Attribution to: user3003810

Possible Suggestion/Solution #1

You need to "notice" somehow the last clicked row and then if a next one is clicked just clear the background color of that row:

<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>

Attribution to: Sergej Utko
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/31380

Search form

You are here

highlight single selected row in table

Possible Suggestion/Solution #1

My Block Status