In rich:dataTable the background color of the datatable row disappears

Question

I have used jsf richfaces in my project. I have to highlight the row in richfaces datatable after user clicks the particular row.I have used jquery to highlight the row. But the background color of the row disappears after we click the row.If i gave jQuery.noConflict(); the background color persists but the page is not rendering and action tag is not working.Can any one help me to resolve this..

Datatable Column Value:

<rich:dataTable value="#{myBean.list}" var="bean" >
<rich:column>
<a4j:commandLink value="#{bean.id}" render="info,tablepanel" action="#
{myBean.save(bean.id)}" onclick="changeBackground(this)" />
</rich:column>  
</rich:dataTable>

Jquery:

<script>
function changeBackground(element){
/* jQuery.noConflict(); */
jQuery(element).parents('tr:first').addClass('backgroundRed');
 }
</script>

CSS:

<style>
.backgroundRed {
color: #555658;
background-color: yellow;
cursor : pointer;
}
</style>

Thanks in advance..

Answer 1

You can do this with the following code:

<rich:dataTable value="#{myBean.list}" var="bean" >
     <rich:column>
         <a4j:commandLink value="#{bean.id}" render="info,tablepanel" action="#/>
     </rich:column>  
     <a4j:support event="onRowClick" oncomplete="highlightSingleRow(this)"/>
</rich:dataTable>

Javascript:

jQuery.noConflict();
function highlightSingleRow(col) {
    jQuery(col).parent().parent().find('tr').removeClass('highlight-row');
    jQuery(col).parent().addClass('highlight-row');
}

CSS:

.highlight-row {
    background-color: yellow;
    cursor : pointer;
}