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();
});
});
});
Code language:JavaScript(javascript)
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.
Great. Do you know how to remove rows by clicking it, which was just appended by: $(“#add_sample_item”).click(function() { $(‘#sample’).append(‘ a b c ‘); }); Thanks, Jorge
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.
Great.
Do you know how to remove rows by clicking it, which was just appended by:
$(“#add_sample_item”).click(function() {
$(‘#sample’).append(‘ a b c ‘);
});
Thanks, Jorge
thanks for help me
how to insert the data in table answer display on a webpage
Thanks a lot to share…………