JQuery implements clicking on a row to delete an HTML table row

  • 2020-03-30 04:08:35
  • OfStack

JQuery has become one of the most used and favorite JavaScript frameworks of all time. Not only does it not reduce the simple technical overhead of coding in JavaScript, but it also makes your code cross-browser compatible. I've written a lot of jQuery tutorials, and at this point, I'm also using this simple pure implementation. The task is to use some snazzy effects from an HTML table by simply clicking on the row of the row. Here's 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 the code above, we have attached handlers for all the "TR" in the # sample table. By clicking on, we first change the background of the row, then fade it out and delete it. This is a simple task.


Related articles: