Delete Row from HTML Table by clicking it using jQuery
- By Viral Patel on July 17, 2009
- JQuery
jQuery has became one of the most used and most loved JavaScript framework of all time. It not only does reduce the overhead in coding simple techniques in JavaScript, but also make your code cross browser compatible. I have written many tutorials on jquery and this time also I came with this simple plain implementation. The task is to remove the rows from a HTML table using some funky effects just by clicking the row. Following is the jQuery code to achieve this.
$(document).ready(function() {
$("#sample tr").click(function() {
//change the background color to red before removing
$(this).css("background-color","#FF3700");
$(this).fadeOut(400, function(){
$(this).remove();
});
});
});
In above code we have attached handler with all “tr” in “#sample” table. On click we are first changing the background of the row and then fade it out and remove it. This is such a simple task.
Online Demo
Get our Articles via Email. Enter your email address.
i have done the similar thing:
http://sarfraznawaz.wordpress.com/2009/09/14/deleting-table-rows-using-jquery-and-php/
so cool. thanks so much
Nice Tutorial . .There’s a similar Deletion via Ajax here :
http://youhack.me/2010/03/26/remove-data-in-a-div-after-successfully-deleted-using-jquery/
This one displays data in a tabular fashion using css and not
Interesting approach. Thanks.