Home > Article > Web Front-end > jQuery implements deleting HTML table rows by clicking on the row_jquery
jQuery has become one of the most used and favorite JavaScript frameworks of all times. Not only does it reduce the simple technical overhead of coding in JavaScript, but it also makes your code cross-browser compatible. I have written many tutorials about jQuery, and at this time, I also used this simple pure implementation. The task is to use some funky effects from an HTML table by just clicking on the row of the row. Below 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 the above code, we have attached handlers for all "TR" in the "#example" table. By clicking on it, we first change the background of the row, then fade it out and delete it. This is a simple task.