Question

I have this JSF table:

<h:dataTable id="itemsTable" 
    value="#{SelectionBean.selectedItems}" var="item"  >

<f:facet name="header">
  <h:outputText value="Items" />
</f:facet> 
<h:column>
  <f:facet name="header">
    <h:outputText value="Select" />
  </f:facet>
  <h:selectBooleanCheckbox value="#{item.selected}" />
</h:column>
<h:column>
  <f:facet name="header">
    <h:outputText value="name" />  
  </f:facet> 
    <h:outputText value="#{item.name}"></h:outputText>
</h:column>
</h:dataTable>

I want to highlight the row of the table when it’s clicked. Is there a way JavaScript code to highlight the rows only if the checkbox is clicked?

Answer 1

The above code you have show is a plain Java Server Faces(XHTML) code.So eventually it renders as HTML. In HTML if datatable renders at , with the help of jquery you could easily highlight it with the help of ID specified or selecting using the tag name. if you need help further with jquery on highlighting this link might be useful jQuery highlight table row.

If you are using Rich faces by any chance you could use the rich:jquery tag to achieve the same instead of using a external javascript file.

P.S if you are using jquery using an external file with rich faces try to make use of the jquery.noconflict() method in your code as prototype.js in JSF may conflict with your code.

Good Luck!

---

Update

May be this code snippet could be helpful for you

<script type="javascript">

if($('.checkboxClass').attr('checked','checked')){

  $('tr').css('background-color','yellow');

 }
</script>