OnMouseOver to display an image inside each row of p:dataTable

I have a p:dataTable and I want to create and effect that when I hover my mouse over a row, a delete image appear to allow me to delete that row. I use PrimeFaces.escapeClientId to convert jsf Id to id that jQuery understand. Here is what I got so far

<p:dataTable value=#{...} var="item">
   <p:column>
       <div onmouseover="jQuery(PrimeFaces.escapeClientId('deleteButton')).fadeIn()">
            <!-- Content of the row -->
            <p:commandButton id="deleteButton" image="delete" style="border: 0; display: none;" 
                              actionListener="#{bean.deleteRow(item)}" />
       </div>
 开发者_C百科  </p:column>
<p:dataTable>

Unfortunately, it does not work. Firebug return no error. please please help

The immediate problem is that you didn't put quotes around "deleteButton" - so javascript thought it was a variable name, not a string literal.

You can easily skip the whole id business and just show, for example "all the divs inside the current element", by passing this as jQuery context:

<p:column>
 <div onmouseover="jQuery('div', this).fadeIn()">
    to jest div
    <div style="color: wheat; background-color: green; display: none">
      <p:commandButton id="deleteButton" image="delete" style="border: 0" actionListener="#{bean.deleteRow(item)}" />
    </div>
 </div>
</p:column>

The onmouseover should also work on p:column.

Use onmouseenter and onmouseleave instead of onmouseover and onmouseout to avoid flashing that caused by event bubbling

e.g.

<div onmouseenter="jQuery('span', this).fadeIn()" 
     onmouseleave="jQuery('span', this).fadeOut()">
     ...
</div>