Jquery table row on mouseover show edit delete buttons

Amitpatil
Posted by Amitpatil under jQuery category on | Points: 40 | Views : 14301
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>

Comments or Responses

Posted by: Hoverguy on: 4/25/2013 Level:Starter | Status: [Member] | Points: 10
Nice code, but for some reason when i copy those codes and paste it to my own code, those Edit and Delete buttons stop working.
Do i have to add something else in my code to get it working?

Response please to tepu92@gmail.com.

Login to post response