[SalesForce] highlight single selected row in table

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

Best Answer

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