Changing background color of the row on click of a link

Question

I am using Richfaces 4. I have a <rich:datatable /> with 4 columns. In that, first column is a <a4j:commandlink /> . I need to change the background color of the entire row when I click on the link. On click of the link I am calling action listener, and oncomplete I am rerendering the page. How do I change the color of the clicked row ?

Answer 1

Add on your link the onclick method :

<rich:column>
  <a4j:commandlink onclick="changeBackground(this)" ...
</rich:column>

The Script (Using jQuery) to find the tr of the cell and apply style :

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

and the css for example

.backgroundRed {
    color: #555658;
    background-color: red;
}

You can check this conversation to further information.