File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes JSF and the fly likes how to highlight a row in h:datatable when mouse over it Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "how to highlight a row in h:datatable when mouse over it" Watch "how to highlight a row in h:datatable when mouse over it" New topic

how to highlight a row in h:datatable when mouse over it

Mohamad Norouzi

Joined: Oct 12, 2004
Posts: 18

actually I have two question, first how to highlight the row of data table when the mouse goes over it. I am used both h:dataTable and t:dataTable but I couldnt do that.

and second, how to fire an action method with javascript, I want when user click on a row of a dataTable the application identify the selected row and go to next page.

Thank you so much

<a href="" target="_blank" rel="nofollow"></a><br /><a href="" target="_blank" rel="nofollow"></a>
Sudeep Agrawal
Ranch Hand

Joined: May 31, 2006
Posts: 34
Did you find a solution for this ? I am looking for a similar solution where I can toggle the color of each row in the data table !
Amit Nair

Joined: May 23, 2006
Posts: 16
There is a built in component(rich:datatable) with the effect of change in row color on mouse over. This is ajaxified & support to nested tables is also provided.

Code Snippet:---

has attributes like onRowMouseOver, onRowMouseOut
Munish K Singh

Joined: Mar 10, 2004
Posts: 2

you can use below code to highlight table row in data table.

<script type="text/javascript">
function onCommunicationMouseOver(selectedRow,isMouseOver) {
var selectedColId =;
var subId = selectedColId.substring(0,selectedColId.lastIndexOf(":"));
var selectedObjectId = document.getElementById(subId+":referenceNoLink");

selectedObjectId.parentNode.parentNode.parentNode.className = 'portlet-table-selected portlet-form-field-label';
selectedObjectId.parentNode.parentNode.parentNode.className = 'portlet-table-body portlet-form-small';


<hx:dataTableEx id="commnResultsSummaryList"
headerClass="portlet-table-header portlet-form-small"
footerClass="portlet-table-footer portlet-form-small"
columnClasses="portlet-table-body portlet-form-small" border="0"
cellpadding="2" cellspacing="0" width="98%">

<hx:columnEx width="18%">
<hx:requestLink styleClass="requestLink" id="referenceNoLink"
onmouseover="onCommunicationMouseOver(this,true);" onmouseout="onCommunicationMouseOver(this,false);"
<hutputText id="resultRefNumber" value="#{abcDetailList.referenceNo}" />
<f:param value="#{abcDetailList.referenceNo}" name="paramRefNumber" />

Akaine Harga
Ranch Hand

Joined: Nov 03, 2009
Posts: 97

Taken from richfaces example:

Wanna install linux on a vacuum cleaner. Could anyone tell me which distro sucks better?
willCodeForFood("Java,PHP,C#,XML,VBS,XHTML,CSS,JavaScript,SQL"); //always looking for job opportunities in AU/NZ/US/CA/Europe :P
I agree. Here's the link:
subject: how to highlight a row in h:datatable when mouse over it
It's not a secret anymore!