Home > Web Front-end > JS Tutorial > body text

jQuery implements deleting HTML table rows by clicking on the row_jquery

WBOY
Release: 2016-05-16 16:33:20
Original
1428 people have browsed it

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();
});
});
});
Copy after login

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.

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template