Jquery table row on mouseover show edit delete buttons

This is simple, flexible, multipurpose useful jquery code that will add "Edit" and "Delete" link to the last TD of the row on mouseover event. This script can be used in many different ways. You can even change text with images that will help you create nice user interface.

See live demo here http://jsfiddle.net/g8HX7/3/embedded/result/

Style

You can change css as per your requirement, this doesnt affect the code at all. Freedom !

 <style>
   table {
	 font-family: verdana;
	 font-size: 12px;
   }
   table th{
	  text-align: left;
	  background: #D3D3D3;
	  padding : 2px;	   
   }
   table tr:hover{
	  background: #EFEFEF;
   }
   table tr{
	  text-align: left;
   }
   table td{
	  padding: 5px;
   }	
   table td a{
	  color: #0454B5;	
   }
 </style>

HTML for the demo


Notice the table class ie class="hover", You can change this class name too, just dont forget to make same change in javascript code.
And second thing is TR must have some id set so script can track which record to edit/delete.

  
  <table width="40%" border="0" class="hover">
    <tr>
	  <th>First Name</th>
	  <th>Last Name</th>
	  <th width="20%">Action</th>
	</th>
    <tr id="100">
	  <td>Amit</td>
	  <td>Patil</td>
	  <td></td>
	</tr>
    <tr id="101">
	  <td>Amit</td>
	  <td>Patil</td>
	  <td></td>
	</tr>
    <tr id="102">
	  <td>Amit</td>
	  <td>Patil</td>
	  <td></td>
	</tr>
    <tr id="103">
	  <td>Amit</td>
	  <td>Patil</td>
	  <td></td>
	</tr>
    <tr id="104">
	  <td>Amit</td>
	  <td>Patil</td>
	  <td></td>
	</tr>
    <tr id="105">
	  <td>Amit</td>
	  <td>Patil</td>
	  <td></td>
	</tr>
  </table>

Here is the heart of the script, jquery code

 
<script>
$(document).ready(function(){
    // show buttons on tr mouseover
    $(".hover tr").live("mouseenter",function(){
            $(this).find("td:last-child").html('<a href="javascript:void(0);" onClick="editrow('+$(this).attr("id")+')">Edit</a>&nbsp;&nbsp;<a href="javascript:void(0);" onClick="deleterow('+$(this).attr("id")+')">Delete</a>');    
    });//
    
    // remove button on tr mouseleave
    $(".hover tr").live("mouseleave",function(){
       $(this).find("td:last-child").html("&nbsp;");    
    });

	// TD click event
    $(".hover tr").live("click",function(event){
       if(event.target.nodeName == "TD"){ 
		   alert("You can track TD click event too....Isnt it amazing !!!");
	   }
    });
});
editrow = function (itemId){
	alert("You clicked 'Edit' link with row id :"+ itemId);
}
deleterow = function (itemId){
	alert("You clicked 'Delete' link with row id :"+ itemId);
}
</script>