Home  >  Article  >  Web Front-end  >  jQuery implements deleting HTML table rows by clicking on the row_jquery

jQuery implements deleting HTML table rows by clicking on the row_jquery

WBOY
WBOYOriginal
2016-05-16 16:33:201417browse

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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn