I spent some time earlier today looking for a jQuery code snippet which would allow me to show some action links in a table row on hover… a pretty standard SaaS UI component for editing records.

Overall, the hover effect is pretty simple to use within the jQuery library, with show() and hide() methods. However, most of the examples I found were geared towards unique id’s or classes, which gets messy when dealing with tabular data.

I want a single class for each row so I can easily style the table row, but, I need unique link actions for each row as well, so I can edit or delete the proper record. Obviously it would be easiest to simply show the edit and delete action links for all records, but I think a little jQuery fanciness was appropriate in this case.

The solution was to use the DOM’s parent/child relationship (which of course jQuery makes full use of) in combination with some form of “this” rather than a hard coded class/id in each method.

Here’s the demo.

First the HTML, a simple table with 2 rows and a little highlighting on mouseOver to further the UX:

<table width="600" cellpadding="6">
  <tr onmouseOver="this.style.backgroundColor='#ADD9E7';" onmouseOut="this.style.backgroundColor='#FFFFFF';">
    <td width="70%">Lorem ipsum dolor sit amet, consectetur adipisicing</td>
    <td width="30%"><div style="display: none">Edit | Delete</div></td>
  </tr>
  <tr onmouseOver="this.style.backgroundColor='#ADD9E7';" onmouseOut="this.style.backgroundColor='#FFFFFF';">
    <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco</td>
    <td><div style="display: none">Edit | Delete</div></td>
  </tr>
</table>

Next we move on to the jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('.myRow').mouseover(function() {
    jQuery(this).find('div:first').show();
    }).mouseout(function() {
    jQuery(this).find('div:first').hide();
  });
});
</script>

That’s it, not much to it really! If you missed it the demo is here.