jsf-2richfacesrichdatatable

Changing background color of the row on click of a link


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 ?


Solution

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