ViralPatel.net

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.

Online Demo